title: Set state in child after it will receive props?
body: <p>I have two components. One is UserBase on which ajax request is called to get values. When get those values and updated in state of header.</p>
  
  <p>Another component is Header. Its a child component of UserBase. So when the state updated then it pass it to child component.</p>
  
  <p>Now, my problem is I have to update the state of child when it will receive the props from the UserBase component. How can I achieve this functionality.</p>
  
  <p>Here is my code</p>
  
  <p><strong>Header Component</strong></p>
  
  <pre><code>var React = require('react');
  var Router = require('react-router');
  import Auth from './Auth.js';
  import PopupSmall from './PopupSmall.js';
  
  var headerStyle = {
      border:0
  }
  
  class Header extends React.Component{
  
      constructor(){
          super();
          console.log("constructor");
          this.state = {basicInfo : {}};
      }
  
      // **some function which needs to tigger when this component will receive props**
  
      popupChange(){
          console.log("============popupChange============");
          console.log(this.state);
          Router.browserHistory.push("/dashboard");
      }
  
      render(){
          if(this.props.basicInfo){
  
              return (
                  &lt;div&gt;
                  {this.props.basicInfo.isAgency==1 ? &lt;PopupSmall popupCallBack={this.popupChange.bind(this)} itemList={this.props.agencies} show='true' title='Agencies'/&gt; : console.log()}
              &lt;/div&gt;
              )
          }
  
      }
  }
  
  export default Header;
  </code></pre>
  
  <p><strong>UserBase Component</strong></p>
  
  <pre><code>import React from 'react';
  import Header from './Header.js';
  import Auth from './Auth.js';
  import Loader from './Loader.js';
  
  var Router = require('react-router');
  
  class Base extends React.Component{
      constructor(){
          super();
          this.state = {basicInfo :[]};
      }
  
      loadDataFromServer() {
          var tokenId = Auth.getCookies("token");
  
          if(tokenId!=""){
  
              var data = {
                  token : tokenId
              }
  
              $.ajax({
                url: 'http://xxx.xxxxxxx.xxx/abc/cde',
                dataType: 'json',
                cache: false,
                type : 'POST',
                data : JSON.stringify(data),
                headers: { 
                      'Accept': 'application/json',
                      'Content-Type': 'application/json' 
                  },
                success: function(response) {
  
                  var info = {
                      compName : response.name,
                      firstName : response.fn,
                      isAgency : response.isAgeny
                  }
  
                  this.setState({basicInfo:info}, function(){
                      //console.log(this.state.data);
                  }.bind(this));
  
                }.bind(this),
                error: function(xhr, status, err) {
                  console.error("", status, err.toString());
                }.bind(this)
              });
          } else {
              Router.browserHistory.push('/login');
          }
      }
  
      componentDidMount() {
          this.loadDataFromServer();
      }
  
      render(){
          document.body.className="nav-md";
  
          return (
  
              &lt;div className="container body"&gt;
                &lt;div className="main_container"&gt;
                      &lt;Header basicInfo={this.state.basicInfo} /&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
          );
      }
  }
  
  export default Base;
  </code></pre>