title: React: Checkbox triggers rendering only once
body: <p>This might be a very newbie thing, but I can't understand why the component doesn't re-render after a checkbox is triggered. It happens only the first time. So I have the following component:</p>
  
  <pre><code>class Parent extends Component {
    constructor(props) {
      super(props);
      this.state = {
        checked: false
      }
    }
    render() {
      let array = [child];
  
      if (this.state.checked) {
        child = &lt;Child /&gt;
      } else {
        child = null
      }
  
      onClick = e =&gt; {
        this.setState({checked: !this.state.checked})
      }
  
      return(
        &lt;div&gt;
          &lt;label&gt;
            &lt;input
              type="checkbox"
              checked={this.state.checked}
              onClick={this.onClick.bind(this)}
            /&gt;
            &lt;span&gt;Checkbox&lt;/span&gt;
          &lt;/label&gt;
          {array}
        &lt;/div&gt;
      )
    }
  }
   export default Parent;
  </code></pre>
  
  <p>Basically, the expected behavior is:</p>
  
  <ol>
  <li>The component renders, the initial state of <code>checked</code> is <code>false</code>, hence the <code>&lt;Child /&gt;</code> component is not shown.</li>
  <li>The checkbox is triggered, the <code>&lt;Child /&gt;</code> component in the <code>array</code>, since the state is true.</li>
  <li>The component renders, showing the <code>&lt;Child /&gt;</code>.</li>
  <li>The checkbox is triggered setting the state to false,</li>
  <li>The component renders NOT showing the <code>&lt;Child /&gt;</code>, since it should be <code>null</code>.</li>
  </ol>
  
  <p>With my code, steps 1, 2, 3 happen as expected, but when I uncheck the checkbox, the component does not render, and the <code>&lt;Child /&gt;</code> is still there. </p>
  
  <p>What is conceptually wrong in this code, and how to get the desired behavior? </p>