Trying React radio but the strange thing is that the radio selection will not update its view. Can anyone take a look at the code below and let me know what's wrong?

  class Test extends React.Component {
    constructor(props){
    super(props);

    this.state = {
      radioVal: "first"
    }
  }

  handleRadioSelection(e){
    e.preventDefault();

    this.setState({
      radioVal:e.target.value
    })
  }

    render(){
      return (
        <div>
            <label>
            <input type="radio" onChange={this.handleRadioSelection.bind(this)} 
            checked={ this.state.radioVal==="first"} 
            value="first" 
            name="radio1" /> 1 <br />
          </label>

          <label>
            <input type="radio" onChange={this.handleRadioSelection.bind(this)} 
            checked={this.state.radioVal==="second"} 
            value="second" 
            name="radio1" /> 2 <br />
          </label>
            { "Selected: " } {this.state.radioVal}
        </div>
    )
  }
}

React.render(<Test />, document.getElementById('container'));

Trying React radio but the strange thing is that the radio selection will not update its view. Can anyone take a look at the code below and let me know what's wrong?

  class Test extends React.Component {
    constructor(props){
    super(props);

    this.state = {
      radioVal: "first"
    }
  }

  handleRadioSelection(e){
    e.preventDefault();

    this.setState({
      radioVal:e.target.value
    })
  }

    render(){
      return (
        <div>
            <label>
            <input type="radio" onChange={this.handleRadioSelection.bind(this)} 
            checked={ this.state.radioVal==="first"} 
            value="first" 
            name="radio1" /> 1 <br />
          </label>

          <label>
            <input type="radio" onChange={this.handleRadioSelection.bind(this)} 
            checked={this.state.radioVal==="second"} 
            value="second" 
            name="radio1" /> 2 <br />
          </label>
            { "Selected: " } {this.state.radioVal}
        </div>
    )
  }
}

React.render(<Test />, document.getElementById('container'));

• javascript
• reactjs
• radio-button

Share Improve this question Follow edited Jul 1, 2022 at 19:43 Jonas 129k103103 gold badges328328 silver badges405405 bronze badges asked Apr 15, 2017 at 18:54 max limax li 2,46744 gold badges3131 silver badges4646 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Remove e.preventDefault(); from handleRadioSelection. Is there a reason why you added that line in the first place?