title: React component only changes state on second onClick event
body: <p>I have these two <em>simplified</em> React components, where the <code>Times</code> component is a child of the <code>Create</code> component (see below for code samples). The expected behavior is that initially, the <code>Times</code> component is not shown, but when the user clicks on the link with <code>onClick</code>, the <code>Times</code> component appears.</p>
  
  <p>The components work as expected for the most part, but strangely, after clicking on the <code>onClick</code> link for the first time, the <code>Times</code> component does not appear and the <code>Create</code> component does not change state at all as is shown in the console. However, when clicking on the link a second time, the <code>Create</code> component does change state and rerenders, and the <code>Times</code> component is seen. </p>
  
  <p><strong>Create.jsx</strong></p>
  
  <pre><code>import React from 'react';
  import Times from './Times.jsx';
  
  export default React.createClass({
  
    getInitialState: function () {
      return {times: false};
    },
  
    _change: function () {
      this.replaceState({times: true});
      console.log(this.state.times);
    },
  
    render: function () {
      return (
        &lt;div id="create"&gt;
          &lt;div id="outerbox"&gt;
            &lt;a onClick={this._change}&gt;Times&lt;/a&gt;
            &lt;Times shouldShow={this.state.times}/&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p><strong>Times.jsx</strong></p>
  
  <pre><code>import React from 'react';
  
  export default React.createClass({
  
    propTypes: {
      shouldShow: React.PropTypes.bool.isRequired
    },
  
    getDefaultProps: function () {
      return {shouldShow: false};
    },
  
    getInitialState: function () {
      return {el: 'times'};
    },
  
    componentDidMount: function() {
      if (this.props.shouldShow === false) {
        this.setState({display: 'none'});
      } else {
        this.setState({display: 'block'});
      }
    },
  
    componentWillReceiveProps: function() {
      if (this.props.shouldShow === false) {
        this.setState({display: 'none'});
      } else {
        this.setState({display: 'block'});
      }
    },
  
    render: function () {
      return (
        &lt;div id={this.state.el} style={{"display": this.state.display}}&gt;
          &lt;h1&gt;Times&lt;/h1&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p><strong>Output of console.log</strong></p>
  
  <pre><code>false
  true
  </code></pre>
  
  <p><strong>Why is the state of the <code>Create</code> component not being registered on the first click?</strong></p>