title: Render component after AJAX call ReactJS
body: <p>I want to Render component after AJAX call. ReactJS</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import { Card } from './components/Card';
  
  class App extends React.Component{
      constructor(){
          super();
          this.user = [];
          console.log("constructor");
  }
      componentWillMount() {
          console.log("componentWillMount 1");
                 $.ajax({
                     method:'get',
                     crossDomain: true,
                     url: "http://127.0.0.1:8000/product/"
                 }).done(function(res) {
                     this.user=res;
                     console.log("componentWillMount 2");
  
                 })
      }
  
      render(){
          var us = this.user
          console.log("render");
          return(
              &lt;div className="container-fluid"&gt;
                  &lt;div className="container"&gt;
                      &lt;div className="row"&gt;
                      {(function (rows, i, len) {
                          while (i &lt;len) {
                              rows.push(&lt;div className="col-sm-3"&gt;
                                  &lt;Card user={us[i]}/&gt;
                                  &lt;/div&gt;)
                                  i++
                          }
                          return rows;
                      })([], 0, us.length)}
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          );
      }
  }
  render(&lt;App/&gt;,window.document.getElementById("app"));
  </code></pre>
  
  <p>I want in this order:</p>
  
  <ul>
  <li>constructor </li>
  <li>componentWillMount 1 </li>
  <li>componentWillMount 2 </li>
  <li>render</li>
  </ul>
  
  <p>but its follow like this</p>
  
  <ul>
  <li>constructor </li>
  <li>componentWillMount 1 </li>
  <li>render</li>
  <li>componentWillMount 2 </li>
  </ul>