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'));
                Remove e.preventDefault(); from handleRadioSelection. Is there a reason why you added that line in the first place?
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With