title: How to handle checkbox checked status in reactJS
body: <p>I have multiple checkbox in my React Class <code>B.js</code>:</p>
  
  <pre><code>&lt;input
     type="checkbox"
     inline={true}
     checked={this.props.checkBoxDefaultStatus}
     onChange={this.handleCheckBoxClick} 
  /&gt;
  </code></pre>
  
  <p>Now the prop <code>checkBoxDefaultStatus</code> is passed from parent class <code>A.js</code>.</p>
  
  <p><strong>A.js</strong></p>
  
  <pre><code>this.state = {
    checkBoxDefaultStatus: false
  }
  
  handleMultiSelect() {
      this.setState({
          checkBoxDefaultStatus: true
      })
  }
  
  render() {
    &lt;B checkBoxDefaultStatus={this.state.checkBoxDefaultStatus} /&gt;
  }
  </code></pre>
  
  <p><strong>EDIT: Now All my child checkboxes are getting checked when I click on parent checkbox, but the issue is that my child checked boxes checked status does not change when I click on them as they are already set by parent prop. I need some way to maintain this also.</strong></p>
  
  <p>This is the behaviour I want <a href="https://stackoverflow.com/a/35218069/6574017">https://stackoverflow.com/a/35218069/6574017</a></p>