Why radiobutton isn't checked?

Question

I have

<input type='radio' name='is_active' value='true' checked={this.props.is_active==true ? true : false}/> Active
<input type='radio' name='is_active' value='false' checked={this.props.is_active==false ? true : false}/> Passive
...
<button>Save</button>

When I reload page radiobutton is checked as it should, but when I try to check another I can't select anything (dot in radiobutton disappears) But when I click save it saves right !!! (value of the last radiobutton pressed). I can't understand.. Maybe someone knows what's wrong ?

That should work just fine (though it could be simpler). Please update the question with a **runnable** [mcve] using Stack Snippets (which [support React and JSX](http://meta.stackoverflow.com/questions/338537/how-do-i-create-a-reactjs-stack-snippet-with-jsx-support)). — T.J. Crowder, Dec 19 '16 at 15:57
Re "could be simpler": `checked={this.props.is_active}` for the true one and `checked={!this.props.is_active}` for the false one: http://codepen.io/anon/pen/WoPyrr — T.J. Crowder, Dec 19 '16 at 16:09

score 1 · Accepted Answer · answered Dec 19 '16 at 17:28

you should have state for rendering your html with new values. set your initial state like this (if you're using es6):

constructor (props) {
 super(props)
 this.state = {
  is_active: this.props.is_active
 }
}

also you will need a function to call on button's click, which will change the state:

setCheckedValue (val) {
 this.setState({is_active: val})
}

and finally your html will look like this:

<input type='radio' name='is_active' value='true' checked={this.state.is_active==true ? true : false} onClick={this.setCheckedValue.bind(this, 'true')}/> Active
<input type='radio' name='is_active' value='false' checked={this.state.is_active==false ? true : false} onClick={this.setCheckedValue.bind(this, 'false')}/> Passive

score 0 · Answer 2 · answered Dec 19 '16 at 16:20

You have to add a onClick event to change the value of is_active.

<label><input type='radio' name='is_active' value='true' checked={this.props.is_active==true ? true : false} onClick={this.props.is_active=true} /> Active</label>
<label><input type='radio' name='is_active' value='false' checked={this.props.is_active==false ? true : false} onClick={this.props.is_active=false} /> Passive</label>                                                    
<button>Save</button>

Why radiobutton isn't checked?

2 Answers2