title: Create a custom radio button using React JS
body: <p>I'm trying to create a custom radio button. The issue that i'm facing is that i'm unable to uncheck the radio button when another radio button is clicked. Currently it behaves like a checkbox.</p>
  
  <pre><code>import {React, ReactDOM} from '../../shared/lib/react';
  
  export default class RadioButton extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
            checkedRadioBtn: false
          };
          this.toggleRadioBtn = this.toggleRadioBtn.bind(this);
       };
  
  
      toggleRadioBtn(){
          this.setState({checkedRadioBtn: !this.state.checkedRadioBtn});
      };
  
      render() {
          return (
              &lt;div className="radio-btn-group"&gt;
                  &lt;div onClick={this.toggleRadioBtn} className={this.state.checkedRadioBtn ? "radiobtn checked" : "radiobtn unchecked"} data-value={this.props.value}&gt;&lt;/div&gt;
                  &lt;label&gt;{this.props.text}&lt;/label&gt;
              &lt;/div&gt;
          );
      }
  };
  </code></pre>