title: React: Child component not rendering on parents state change
body: <p>In the below example, Apps (parent) component and its child components loads well on the startup. But if I select the tab (call handleClick) which updating the state with new tab value not re-rendering the child components (tabs, content) with updated value and the child props are not updating with parent state.
  Please advise.
  PS: I have added multiple console log for debugging purpose.</p>
  
  <pre><code>import React, { Component } from 'react';
  var tabData = [
    {name: 'Tab 1', isActive: true},
    {name: 'Tab 2', isActive: false},
    {name: 'Tab 3', isActive: false}
  ];
  export class Tabs extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        activeTab: props.activeTab
      };
    }
  
    componentWillReceiveProps(nextProps) {
      console.log("Tabs:componentWillReceiveProps $$$$$$", this);
      this.setState({activeTab: nextProps.activeTab});
    }
  
    render() {
      console.log("Tabs $$$$$$", this.props);
      return (
  
        &lt;ul className="nav nav-tabs"&gt;
          {
            tabData.map(function (tab, index) {
              // console.log("####", this.props.activeTab);
              return (
                &lt;Tab key={index} data={tab} isActive={this.props.activeTab === tab}
                     handleClick={this.props.changeTab.bind(this,tab)}/&gt;
              );
            }.bind(this))}
        &lt;/ul&gt;
      )
        ;
    }
  }
  export class Tab extends React.Component {
    componentWillReceiveProps(nextProps) {
      console.log("Tab:componentWillReceiveProps $$$$$$", nextProps);
  
    }
  
    render() {
      console.log("Tab $$$$$$", this.props);
      return (
        &lt;li onClick={this.props.handleClick} className={this.props.isActive ? "active" : null}&gt;
          &lt;a href="#"&gt;{this.props.data.name}&lt;/a&gt;
        &lt;/li&gt;
      );
    }
  }
  export class Content extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        activeTab: props.activeTab
      };
    }
  
    componentWillReceiveProps(nextProps) {
      console.log("Tabs:componentWillReceiveProps $$$$$$", nextProps);
  
    }
  
    render() {
      console.log("Content $$$$$$", this.state.activeTab);
      console.log("Content props $$$$$$", this.props.activeTab);
      return (
        &lt;div&gt;
          {this.state.activeTab.name === 'Tab 1' ?
            &lt;section className="panel panel-success"&gt;
              &lt;h2 className="panel-heading"&gt;Content 1&lt;/h2&gt;
  
              &lt;p className="panel-body"&gt;chart1&lt;/p&gt;
  
              &lt;p className="panel-body"&gt;handsontable1&lt;/p&gt;
            &lt;/section&gt;
            : null}
          {this.state.activeTab.name === 'Tab 2' ?
            &lt;section className="panel panel-warning"&gt;
              &lt;h2 className="panel-heading"&gt;Content 2&lt;/h2&gt;
  
              &lt;p className="panel-body"&gt;chart2&lt;/p&gt;
  
              &lt;p className="panel-body"&gt;handsontable2&lt;/p&gt;
            &lt;/section&gt;
            : null}
          {this.state.activeTab.name === 'Tab 3' ?
            &lt;section className="panel panel-danger"&gt;
              &lt;h2 className="panel-heading"&gt;Content 3&lt;/h2&gt;
  
              &lt;p className="panel-body"&gt;chart3&lt;/p&gt;
  
              &lt;p className="panel-body"&gt;handsontable3&lt;/p&gt;
            &lt;/section&gt;
            : null}
        &lt;/div&gt;
      );
    }
  }
  export class App extends React.Component {
    constructor(props) {
      super(props);
      //this.activeTabs = tabData[0];
      this.state = {
        activeTab: tabData[0]
      }
    }
  
  
    handleClick(tab) {
      debugger;
      console.log("1handleClick*****", tab, this);
      this.setState({activeTab: tab});
      console.log("2handleClick*****", this);
    }
  
    render() {
      console.log("App $$$$$$", this.state.activeTab);
      return (
        &lt;div&gt;
          &lt;Tabs activeTab={this.state.activeTab} changeTab={this.handleClick}/&gt;
          &lt;Content activeTab={this.state.activeTab}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  React.render(
    &lt;App /&gt;,
    document.getElementById('app')
  );
  </code></pre>