reactjs radio group setting checked attribute based on state <p>Clicking on the second radio button changes the state which triggers the render event. However, it renders the first radio button as the checked one again even though state.type got changed.</p> <p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>var MyComponent = React.createClass({ getInitialState: function() { return { type: 1 }; }, render: function() { console.log('-&gt;&gt; type: ' + this.state.type);//prints the expected value return (&lt;div className="my-component"&gt; &lt;label&gt;type 1&lt;/label&gt; &lt;input ref="type1Selector" type="radio" name="type" id="type1" onChange={this.changeHandler} checked={this.state.type === 1}/&gt;&lt;br/&gt; &lt;label&gt;type 2&lt;/label&gt; &lt;input ref="type2Selector" type="radio" name="type" id="type2" onChange={this.changeHandler} checked={this.state.type === 2}/&gt;&lt;br/&gt; &lt;/div&gt;); }, changeHandler: function(e) { e.preventDefault(); var t = e.currentTarget; if(t.id === 'type1') { this.setState({type: 1}); } else { this.setState({type: 2}); } } }); ReactDOM.render(&lt;MyComponent /&gt;, document.getElementById('container'));</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-with-addons.min.js"&gt;&lt;/script&gt; &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"&gt;&lt;/script&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;title&gt;JS Bin&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="container"&gt;&lt;/div&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p> <p>Can someone tell how to get this to work and why react is behaving like this?</p>