radio button in react

Question

I want to save the radio button value to a state.

I have a form of a text box and few radio buttons. i want to save the text field and radio button value so that i can render these values in a table.

export class AddColumns extends React.Component{

  constructor(props) {
      super(props);
        this.state={
            newItemInput: '',
            selectedValue: '',
            buyItems :['Development','Testing']
        }
      }

  handleChange(value) {
    this.setState({
          ...state,
          selectedValue: this.state.selectedValue
    });
  };

  change (event){
    this.setState({
      [event.target.name]:event.target.value
    });
    console.log("button clicked",this.state);
  };

 render(){
      return(
        <div className="container">
          <div className="form-group">
              <label className="sr-only" htmlFor="newItemInput">Add New Item</label>
              <input type ="text" ref ={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value = {this.state.newItemInput} className="form-control" 
                      id="newItemInput" onChange={event => this.change(event)}/>
            </div>

            <div className="k-form-field" value={this.state.selectedValue} onChange={this.handleChange}>
              <input type="radio" name="radio" id="radio1" className="k-radio" />
              <label className="k-radio-label">RadioButton 1</label>

              <input type="radio" name="radio" id="radio2" className="k-radio" />
              <label className="k-radio-label">RadioButton 2</label>

              <input type="radio" name="radio" id="radio3" className="k-radio" />
              <label className="k-radio-label">RadioButton 3</label>
            </div>

            <div className="form-group">
              <button type="submit" className="btn btn-primary">Add</button><p>{this.state.messgae}</p>
            </div>
          </div>
);
}

I am not able to get the radio button value, please help

And where are you values on inputs? You have value and handler on parent div, instead of input elements... — Mario Nikolaus
– Mario Nikolaus, Commented Feb 21, 2018 at 7:40

Rodius · Accepted Answer · 2018-02-21 07:57:35Z

2

You have to call onChange on the radiobutton itself instead of the div that wrapps them all.

<input type="radio" name="radio" id="radio1" className="k-radio" onChange={this.handleChange} />

edited Feb 21, 2018 at 7:57

answered Feb 21, 2018 at 7:40

Rodius

2,32117 silver badges20 bronze badges

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

Comments

RIYAJ KHAN · Accepted Answer · 2018-02-21 09:22:32Z

0

There are some correction.

You are missing form tag wrapping input control
on form submit define event handler which will receive form data.
attach onChange event handler to radio button
attach value attribute to radio button having some value

Your render with above changes:

     render() {
        return (
          <div className="container">
            <form onSubmit={this.handleSubmit} >
            <div className="form-group">
//.....
              <input type="text" ref={input => this.newColumn = input} name="newItemInput" placeholder="Modules" value={this.state.newItemInput} className="form-control"
               //.....
            </div>

            <div className="k-form-field" >
                <input type="radio" name="radio" value="radio1" className="k-radio" onChange={this.handleChange}/>                                        
                                                 type="radio" name="radio" value="radio2" className="k-radio" onChange={this.handleChange}/>
              //.....

              <input type="radio" name="radio" value="radio3" className="k-radio" onChange={this.handleChange}/>
              //.....
            </div>

            <div className="form-group">
              <button type="submit"className="btn btn-primary">Add</button><p>{this.state.messgae}</p>
            </div>
            </form>
          </div>
        );
      }

Handler :

handleSubmit=(event)=>{
    console.log('A form was submitted: ' , this.state); //form data
    event.preventDefault();
    console.log(event);
  }

Radio button handler:

handleChange=(event)=> {
    console.log(event.target.value);
    this.setState({
      ...this.state,
      selectedValue: event.target.value
    });
  };

Working codesandbox

edited Feb 21, 2018 at 9:22

answered Feb 21, 2018 at 7:47

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

4 Comments

mohan Over a year ago

Hi Riyaj, Thanks for the help, but are you getting the value of radio button?? Previously the form was working but i m unable to save the radio button value in the sate.

RIYAJ KHAN Over a year ago

@bisnubiswal I have updated answer with sandbox code.Please check it

mohan Over a year ago

Hi RIYAZ, i am able to get value as "on", but how can i know which radio button is clicked, so that i can print that button name in the table? need help.

RIYAJ KHAN Over a year ago

my bad,I have updated . codesandbox link . codesandbox.io/s/k2km5kxpkr . value is missing

Collectives™ on Stack Overflow

radio button in react

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related