How to get data from radio buttons in ReactJS?

Question

I have few radio buttons in my form. When I check the radio buttons I try to log them in console but now I want to get the text of radio button and save it in a state variable but I am not able to store it in state variable. There are 4 options in question 1 of the form eg: >=25 yrs, 26-35yrs,etc I want to store these age in state variable.

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);
    if(checkedValue === '-1'){
    console.log(this.state.age)
    }
  }

    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>
    </form>

     </div>

          </div>
        );
      }
    }

    export default ContactForm;

Screenshot of my form:

What should be stored in the age.Like should it be 36-50 yrs ? — pritesh
– pritesh, Commented Feb 25, 2018 at 17:32

Mayank Shukla · Accepted Answer · 2018-02-25 17:38:26Z

1

Automatically state will not get updated, you have to use setState for that inside onChange method.

Like this:

setAge(checkedValue){
    console.log(checkedValue);
    this.setState({
        age: checkedValue
    }, () => {console.log('updated age = ', this.state.age)})
}

answered Feb 25, 2018 at 17:38

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

pizzarob · Accepted Answer · 2018-02-25 17:34:45Z

1

constructor() {
  super();
  this.setAge = this._setAge.bind(this);
}

_setAge(age) {
  return function(e) {
    this.setState({
      age,
    }, () => {
      console.log(this.state.age);
    });
  }
}

render() {
  return (
    <input type="radio" onChange={this.setAge('36-50')} />
  )
}

edited Feb 25, 2018 at 17:34

answered Feb 25, 2018 at 17:30

pizzarob

12.1k7 gold badges51 silver badges70 bronze badges

2 Comments

stone rock Over a year ago

It should be this.setAge('36-50') or this._setAge('36-50')

pizzarob Over a year ago

this.setAge as you can see I am binding the function only once in the constructor.

Collectives™ on Stack Overflow

How to get data from radio buttons in ReactJS?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related