title: Show/Hide components in ReactJS
body: <p>We have been experiencing some problems in using react now but it <em>kinda</em> boils to one part of how we have been using react.</p>
  
  <p>How should we have been showing/hiding child components?</p>
  
  <p>This is how we have coded it (this are only snippets of our components)...</p>
  
  <pre><code>_click: function() {
    if ($('#add-here').is(':empty'))
      React.render(&lt;Child /&gt;, $('#add-here')[0]);
    else
      React.unmountComponentAtNode($('#add-here')[0]);
  },
  render: function() {
    return(
      &lt;div&gt;
        &lt;div onClick={this._click}&gt;Parent - click me to add child&lt;/div&gt;
        &lt;div id="add-here"&gt;&lt;/div&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>and lately I've been reading examples like it should've been somewhere along this lines:</p>
  
  <pre><code>getInitialState: function () {
    return { showChild: false };
  },
  _click: function() {
    this.setState({showChild: !this.state.showChild});
  },
  render: function() {
    return(
      &lt;div&gt;
        &lt;div onClick={this._click}&gt;Parent - click me to add child&lt;/div&gt;
        {this.state.showChild ? &lt;Child /&gt; : null}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p>Should I have been using that React.render()? It seems to stop various things like <code>shouldComponentUpdate</code> to cascade to child and things like <code>e.stopPropagation</code>...</p>