title: How to wait for AJAX response and only after that render the component?
body: <p>I have a problem with one of my React components. I think AJAX doesn't load all the content from external server before React renders the <code>ChildComp</code> component.</p>
  
  <p><a href="https://i.stack.imgur.com/o0ZtH.png"><img src="https://i.stack.imgur.com/o0ZtH.png" alt="Obj tree"></a></p>
  
  <p>Above you can see the tree of response which is coming from server. And this is my component's code:</p>
  
  <pre><code>var ChildComp = React.createClass({
    getInitialState: function(){
      return {
        response: [{}]
      }
    },
    componentWillReceiveProps: function(nextProps){
      var self = this;
  
      $.ajax({
        type: 'GET',
        url: '/subscription',
        data: {
          subscriptionId: nextProps.subscriptionId //1
        },
        success: function(data){
          self.setState({
            response: data
          });
          console.log(data);
        }
      });
    },
    render: function(){
        var listSubscriptions = this.state.response.map(function(index){
          return (
            index.id
          )
        });
        return (
          &lt;div&gt;
            {listSubscriptions}
          &lt;/div&gt;
        ) 
    }
  });
  </code></pre>
  
  <p>This is working just fine, but if I change my return to:</p>
  
  <pre><code>  return (
       index.id + " " + index.order.id
    )
  </code></pre>
  
  <p>id is undefined. And all of the other properties of order object. Why is it like this? If I <code>console.log</code> my response after <code>success</code> function it gives all the data (like in picture). My guess is that only the first objects are loaded when React renders the component and after that all other inner objects are loaded. I can't really say if that's the case (sounds so weird) nor I can't say how to solve this out.</p>
  
  <p>I tried also something like this</p>
  
  <pre><code>  success: function(data){
      self.setState({
        response: data
      }, function(){
        self.forceUpdate();
      })
    }.bind(this)
  </code></pre>
  
  <p>but still re-render happens before my <code>console.log(data)</code> is triggered. How to wait for AJAX response and only after that render the component?</p>