title: How to reset radio button in react JS
body: <p>I am trying to reset radio button, after adding some form data, but its nit happening in react.</p>
  
  <p>In the add method, i am trying to set the state value of the radio button to blank.</p>
  
  <p>I tried different ways to make the radio button again to blank.None of them is working</p>
  
  <p>I see some react js radio button logic.</p>
  
  <pre><code>export class AddColumns extends React.Component{
  
    constructor(props) {
        super(props);
          this.state={
              newItemInput: '',
              selectedDataValue: '',
              buyItems :['Development','Testing']
          }
        }
  
  handleChangeData = (event) =&gt; {
      this.setState({
        ...this.state,
        selectedDataValue: event.target.value
      });
    };
  
    change (event){
      this.setState({
        [event.target.name]:event.target.value
      });
      console.log("button clicked",this.state);
    };
  
    addColumnItem(e) {
      e.preventDefault();
  
    const newItemInput = this.state.newItemInput;
    var newRadioDataValue = this.state.selectedDataValue;
  
    //doing adding stuff, then reseting all fields
  
    this.setState({
      newItemInput : '',
      newRadioDataValue: '',   //but this radio button is not reseting
    }) 
    }
  
   render(){
        return(
          &lt;div className="container"&gt;
          &lt;form id="Form" className="form-horizontal" onSubmit={(e) =&gt; { this.addColumnItem(e) }}&gt;
            &lt;div className="form-group"&gt;
                &lt;label className="sr-only" htmlFor="newItemInput"&gt;Add New Item&lt;/label&gt;
                &lt;input type ="text" ref ={input =&gt; this.newColumn = input} name="newItemInput" placeholder="Modules" value = {this.state.newItemInput} className="form-control" 
                        id="newItemInput" onChange={event =&gt; this.change(event)}/&gt;
              &lt;/div&gt;
  
              &lt;div className="form-group"&gt;
                    &lt;label className="control-label col-sm-3"&gt;Data Type:&lt;/label&gt;
                    &lt;div className="col-sm-5"&gt;
                      &lt;label className="radio-inline pull-left"&gt;
                        &lt;input type="radio" name="radioData" value="InputData" onChange={this.handleChangeData} /&gt;Input Data
                      &lt;/label&gt;
                      &lt;label className="radio-inline pull-left"&gt;
                        &lt;input type="radio" name="radioData" value="TargetData" onChange={this.handleChangeData} /&gt;Target Data
                      &lt;/label&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;div className="form-group"&gt;
                &lt;button type="submit" className="btn btn-primary"&gt;Add&lt;/button&gt;&lt;p&gt;{this.state.messgae}&lt;/p&gt;
              &lt;/div&gt;
              &lt;/form&gt;
            &lt;/div&gt;
  );
  }
  </code></pre>