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

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

• javascript
• reactjs

• Any error u getting? – RIYAJ KHAN Commented Feb 21, 2018 at 7:39
• And where are you values on inputs? You have value and handler on parent div, instead of input elements... – Mario Nikolaus Commented Feb 21, 2018 at 7:40

2 Answers 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} />

There are some correction.

1. You are missing form tag wrapping input control
2. on form submit define event handler which will receive form data.
3. attach onChange event handler to radio button
4. 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