title: Rendering React Ajax with proper child access
body: <p>I really don't see why one works and the other doesn't hoping someone can shed some rays of light.</p>
  
  <p>That is:</p>
  
  <pre><code>*some component constructor 
  this.state = { dataTransform: '' };
  
  render(){
         if (this.state.dataTransform === ''){
            return null;
         }
         else {
            return ( &lt;Chart config={this.state.dataTransform}/&gt; );
         }       
  }
  </code></pre>
  
  <p><strong>vs</strong> 
  <a href="https://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#rendering-to-null" rel="nofollow">https://facebook.github.io/react/blog/2014/07/17/react-v0.11.html#rendering-to-null</a> 
  no initialization of dataTransform or undefined</p>
  
  <pre><code>render(){
         if (!this.state.dataTransform){
            return null;
         }
         else {
            return ( &lt;Chart config={this.state.dataTransform}/&gt; );
          }       
  }
  </code></pre>
  
  <p>This one will return error unable to read property of dataTransform of null until the request is done and the state is updated.Yet, the top one works with no problem no error messages while performing the get request.</p>
  
  <p>Though the react example <a href="https://facebook.github.io/react/tips/initial-ajax.html" rel="nofollow">https://facebook.github.io/react/tips/initial-ajax.html</a>
  loads within the same component I want to remain stateless and let my parents do the work</p>