title: Radio buttons need to click twice to reflect change
body: <p>1.whenever i click on radio button it call the handleOptionChange callback but not reflect the change in html.
  2.but when i click twice on radio button it reflect the change </p>
  
  <blockquote>
    <p>My question is why i need to click twice on radio buttons? Is am i doing anything wrong?</p>
  </blockquote>
  
  <pre><code>class CompleteProfile extends Component{
  
      constructor(props){
          super(props);
          this.state = {
              teacher_role:'subject'
          };
          this.handleOptionChange = this.handleOptionChange.bind(this);
      }
  
      handleOptionChange(event){
          event.preventDefault();
          let { name, value } = event.target;
          this.setState( { [name]:value } );
      }
  
      render(){
          let { teacher_role } = this.state;
          console.log('teacher:',teacher_role);
          return(
              &lt;Wrapper className="complete-profile"&gt;
                  &lt;CustomContainer&gt;
                      &lt;Title&gt;complete profile&lt;/Title&gt;
                      &lt;ProfileCard&gt;
                          &lt;Form noValidate&gt;
  
                              &lt;FormGroup&gt;
                                  &lt;label&gt;I want to enroll as:&lt;/label&gt;
  
                                  &lt;label htmlFor="test"&gt;
                                      &lt;input id="test" type="radio" name="teacher_role" value="subject" checked={ teacher_role === 'subject' } onChange={ this.handleOptionChange } /&gt;
                                      subject teacher
                                  &lt;/label&gt;
  
                                  &lt;label htmlFor="test1"&gt;
                                      &lt;input id="test1" type="radio" name="teacher_role" value="chapter" checked={ teacher_role === 'chapter' } onChange={ this.handleOptionChange } /&gt;
                                      class teacher
                                  &lt;/label&gt;
  
                                  &lt;label htmlFor="test2"&gt;
                                      &lt;input id="test2" type="radio" name="teacher_role" value="both" checked={ teacher_role === 'both' } onChange={ this.handleOptionChange } /&gt;
                                      both
                                  &lt;/label&gt;
  
                              &lt;/FormGroup&gt;
                          &lt;/Form&gt;
                      &lt;/ProfileCard&gt;
                  &lt;/CustomContainer&gt;
              &lt;/Wrapper&gt;
          )
      }
  
      componentWillUpdate(nextProps){
  
      }
  
      componentDidUpdate(prevProps){
  
      }
  
  }
  </code></pre>