title: Reactjs async rendering of components
body: <p>I want to render my component after my ajax request is done.</p>
  
  <p>Below you can see my code</p>
  
  <pre><code>var CategoriesSetup = React.createClass({
  
      render: function(){
          var rows = [];
          $.get('http://foobar.io/api/v1/listings/categories/').done(function (data) {
              $.each(data, function(index, element){
                  rows.push(&lt;OptionRow obj={element} /&gt;);
              });
             return (&lt;Input type='select'&gt;{rows}&lt;/Input&gt;)
  
          })
  
      }
  });
  </code></pre>
  
  <p>But i get the error below because i am returning render inside the done method of my ajax request.</p>
  
  <p><code>Uncaught Error: Invariant Violation: CategoriesSetup.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.</code></p>
  
  <p>Is there a way to wait for my ajax request to end before start rendering? </p>