title: radio button "checked" disappearing after click to another radio button
body: <p>I have two radio buttons, one of them is "checked" (according to server response - 0 or 10), and I need to click one of the buttons to send new data to the server (ether value 0 or 10). I have working code, data is sending to the server correctly, all is working. But the problem is - property "checked" is disappearing from both buttons after clicking one of them... </p>
  
  <p>Can some one help me?</p>
  
  <pre><code>this.state = {          
     status: ""          
  }
  
  
  statusHandler(e) {
    this.setState({ status: e.target.value });
  }
  
  &lt;div className="modal-body"&gt;
    &lt;div className="form-check form-check-inline"&gt;
      &lt;input className="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio1"
        value={0}
        checked={this.state.status === 0 ? true : false}
        onChange={(e) =&gt; this.statusHandler(e)} /&gt;
      &lt;label className="form-check-label" htmlFor="inlineRadio1"&gt;Open&lt;/label&gt;
    &lt;/div&gt;
    &lt;div className="form-check form-check-inline"&gt;
      &lt;input className="form-check-input"
        type="radio"
        name="inlineRadioOptions"
        id="inlineRadio2"
        value={10}
        checked={this.state.status === 10 ? true : false}
        onChange={(e) =&gt; this.statusHandler(e)} /&gt;
      &lt;label className="form-check-label" htmlFor="inlineRadio2"&gt;Done&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>