title: React child component not re-rendering on state change
body: <p>I realize questions like this have been asked before but from reading several Q&amp;As here it seems like in a lot of cases people are recommending using <code>componentWillUpdate</code> but from my (very) basic understanding of React, if I <code>setState()</code> won't child components re-render if they are affected?</p>
  
  <p>This is my App component (showing the State being set, the function to update the state <code>handleClick</code>, the Display component (which shows the current input from state) and a Button component which shows a number and is passed the function <code>handleClick</code>:</p>
  
  <pre><code> this.State = {
        calcValue: 0
      }
      this.handleClick = this.handleClick.bind(this);
    }
  
    handleClick(val) {
      this.setState({ calcValue: val })
     }
  
    render() {
      return( 
        &lt;div class="calcBody"&gt;
          &lt;Display currentValue={this.State.calcValue} /&gt;
          &lt;h1&gt;Calculator&lt;/h1&gt;
          &lt;div class="numPad"&gt;
          &lt;Button btn="num col1" operator={1} handleClick={this.handleClick.bind(this)} /&gt;
  </code></pre>
  
  <p>This is the Button component: </p>
  
  <pre><code>    class Button extends React.Component {
        constructor(props) {
          super(props);
        }
        render() {
          return(
  /*the button when clicked takes the handleClick function and passes it props based on whatever number is pressed */
            &lt;button onClick={() =&gt; this.props.handleClick(this.props.operator)}&gt;
            &lt;div class={this.props.btn}&gt;{this.props.operator}&lt;/div&gt;
            &lt;/button&gt;
          )
        }
      }
  </code></pre>
  
  <p>Lastly, this is the Display component: </p>
  
  <pre><code>class Display extends React.Component {
    constructor(props){
      super(props);
      this.props = {
        currentValue: this.props.currentValue
      }
    }
  
    render() {
      return(
        &lt;h1&gt;{this.props.currentValue}&lt;/h1&gt;
      );
    }
  }
  </code></pre>
  
  <p>I'm wondering why this does not update when handleClick(val) is called?</p>