title: ReactJs update parent after ComponentDidMount from child class
body: <p>I have a parent class and a child class. The child class will perform an initial load operation based on a property passed from the parent. The parent class will access that data using a static method from the child. In essence, I'm trying to use the child class as a service. The code below illustrates the scenario (note that it's just pseudo code).</p>
  
  <pre><code>var Parent = React.createClass({
  
   componentDidMount: function() {
      console.log("parent component was mounted");
   },
  
    render: function() {
      return (
        &lt;div&gt;
          &lt;Child param={this.props.param} /&gt;
          &lt;p&gt;Child.fetch('key')&lt;/p&gt;
        &lt;/div&gt;
      );
    }
  });
  
  var Child = React.createClass({
      getInitialState: function() {
          return {
              data: {}
          };
      },
  
      componentDidMount: function() {
          console.log("child component was mounted");
  
          $.ajax({
            url: "server/api.php",
          data: {
           param: param
          }
          }).done(function(response) {
            this.setState({data: response});
          }.bind(this));
      },
  
      statics: {
          get: function(key) {
              console.log('get requested for key: ' + key);
  
              var value = null; // default value
  
              if(this.data == null) { return value; }
  
              //get the value from the data based on the key
  
              return value;
          }
      },        
  
    render: function() {
      return (
        &lt;h2&gt;{this.props.param}&lt;/h2&gt;
      );
    }
  });
  </code></pre>
  
  <p>The problem here is that the parent's render function does not update after the data was loaded from the child class. The order of the console.log results is:</p>
  
  <ol>
  <li>Parent render: get requested for key: key</li>
  <li>parent component was mounted</li>
  <li>child component was mounted</li>
  <li>=> should trigger an update to re-render the parent</li>
  </ol>
  
  <p>I'm not sure if its possible to trigger the parent's render function only once after the child component has been loaded. I'm guessing its not, so triggering an update for the parent's render method would suffice. Any suggestions, improvements are welcome as this is fairly new to me.</p>