How to reset form radio buttons to unchecked in reactjs?

Question

I have made 4 radio buttons for 1 question. I have made 2 buttons submit and clear input. When I submit the form after clicking on clear input it does not clear the checked buttons to unchecked how can I do that using reset function ?

contactform.js:

import React, { Component } from 'react';

class ContactForm extends Component {
  constructor(props){
    super(props);
    this.state = {
        age:'',
        gender:'',
        health:'',
        name:'',
        email:'',
        info:'',
        fitness:''
    };
  } 

setAge(checkedValue){
    console.log(checkedValue);
    this.setState({
        age:checkedValue
    })
  }

setGender(checkedValue){
    console.log(checkedValue);
    this.setState({
        gender:checkedValue
    })
  }

  onChangeTextBoxGender(event){
  this.setState({gender: event.target.value})
  }

 savedata(age, gender, health, name, email, info, fitness){
        let newcontent = contentref.push();
        newcontent.set({
            age:this.state.age,
            gender:this.state.gender,
            health:this.state.health,
            name:this.state.name,
            email:this.state.email,
            info:this.state.info,
            fitness:this.state.fitness
        });
  }

  reset(){
    this.setState({
      age:'',
      gender:''
    })
  }

 render() {

    return (
      <div>

        <div id="center">
          <form>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h3>[Test]Contact us Survey Form</h3>  
                </div>
              </div>

            <div id="agegroup" >
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your age group?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>=25 yrs')}/> >=25 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age"  onChange={this.setAge.bind(this,'26-35 yrs')}/> 26-35 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'36-50 yrs')}/> 36-50 yrs</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="age" onChange={this.setAge.bind(this,'>50 yrs')}/> >50 yrs</label>
                  </div>
                </div>
              </div>
            </div>


            <div id="gender">
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <h4>What is your gender?</h4>  
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Female')}/> Female</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Male')}/> Male</label>
                  </div>
                </div>
              </div>
              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,'Prefer not to say')}/> Prefer not to say</label>
                  </div>
                </div>
              </div>

              <div className="form-group">
                <div className="col-sm-offset-2 col-sm-10">
                  <div className="radio">
                    <label><input type="radio" name="gender" onChange={this.setGender.bind(this,-1)}/>Other</label>
                    <input type="text" class="form-inline" id="other1" onChange={this.onChangeTextBoxGender.bind(this)}/>
                  </div>
                </div>
              </div>
            </div>

              <button type="button" class="btn btn-success" onClick={this.savedata.bind(this)}>Submit</button>
              <button type="button" class="btn btn-danger">Clear input</button>

          </form>
        </div>

      </div>
    );
  }
}

export default ContactForm;

See screenshots:

Answer 1

Give a checked attribute for you radio button. Change

<label>
  <input 
    type="radio" 
    name="age" 
    onChange={this.setAge.bind(this,'>=25 yrs')} /> 
  {' '}      
  >=25 yrs
</label>

to

<label>
  <input 
    type="radio" 
    name="age" 
    checked={(this.state.age == '>=25 yrs')} 
    onChange={this.setAge.bind(this,'>=25 yrs')}/> 
  >=25 yrs
</label>

Answer 2

you can control what is selected using the state, below find and example (btw, it is not a good practice generate functions inside the render function because it will cause unnecessary rerenders)

class App extends React.Component {
  state = {
    selectedValue : ''
  }

  optionSelected = (e) => {
    console.log(e.target.value)
    this.setState({
      selectedValue : e.target.value
    })
  }

  reset = (e) => {
    this.setState({
      selectedValue : ''
    })
  }

  render () {
    const { selectedValue } = this.state;
    return (
      <div>
        <div>
         <input 
            type="radio" 
            name="age" value="A" 
            onChange={this.optionSelected}
            checked={selectedValue === 'A'}/> A
        </div>
        <div>
         <input 
            type="radio" 
            name="age" 
            value="B" 
            onChange={this.optionSelected}
            checked={selectedValue === 'B'}/> B
        </div>
        <div>
         <input 
            type="radio" 
            name="age" 
            value="C" 
            onChange={this.optionSelected}
            checked={selectedValue === 'C'}/> C
        </div>

        <button onClick={this.reset}>reset</button>
      </div>
    );
  }
}

ReactDOM.render(<App/>, document.querySelector('#root'))

Demo