title: React.js - componentWillReceiveProps only updates every other this.props update
body: <p>I am building an app with React v0.14.6 . The desired functionality is to click on the GoalItem to show the ModalItem. The goal-item has an 'a' tag with attribute onClick that sets {this.state.showModal: true}. The ModalItem is passed  GoalItem's this.state.showModal via a showModal attribute.</p>
  
  <p>To change the state of the ModalItem component such that  this.state.showModal: this.props.showModal, I use setState() in componentWillReceiveProps. </p>
  
  <p>The strange behavior is that the 'a' tag in GoalItem needs to be clicked twice to make the modal appear.The goal is for just one click to suffice.</p>
  
  <p>Thank you in advance for your help. Below is the relevant code.</p>
  
  <pre><code>//goal-item.jsx
  
  var React = require('react');
  var ModalItem = require('./modal-item');
  
  module.exports = React.createClass({
      getInitialState() {
          return {
              name: this.props.goal.name,
              nameChanged: false,
              showModal: false
          }
      },
      open() {
          this.setState({ showModal: true });
      },
      render() {
          return &lt;a  className="list-group-item"
                     key={this.props.goal.id}
                     onClick={this.open}&gt;
              &lt;ModalItem goal={this.props.goal} showModal={this.state.showModal} /&gt;
          &lt;/a&gt;
      }
  });   
  
  //modal-item.jsx
  
  var React = require('react');
  var Modal = require('react-bootstrap/lib/modal'); 
  var Button = require('react-bootstrap/lib/button');
  module.exports = React.createClass({
      getInitialState() {
          return {showModal: false };
      },
      componentWillReceiveProps() {
          this.setState({ showModal: this.props.showModal });
      },
      close() {
          this.setState({ showModal: false });
      },
      render() {
          return (
              &lt;div&gt;
                  &lt;Modal show={this.state.showModal} onHide={this.close}&gt;
                      &lt;Modal.Header closeButton&gt;
                          &lt;Modal.Title&gt;{this.props.goal.name}&lt;/Modal.Title&gt;
                      &lt;/Modal.Header&gt;
                      &lt;Modal.Body&gt;
                          &lt;p&gt;{this.props.goal.description}&lt;/p&gt;
                      &lt;/Modal.Body&gt;
                      &lt;Modal.Footer&gt;
                          &lt;Button onClick={this.close}&gt;Close&lt;/Button&gt;
                      &lt;/Modal.Footer&gt;
                  &lt;/Modal&gt;
              &lt;/div&gt;
          );
      }
  });
  </code></pre>