title: React component inheritance and ajax calls
body: <p>I'm having a hard time understanding why this doesn't work</p>
  
  <pre><code>var link = window.location.href;
  var array = link.split('/');
  var sub = array[array.length-1];
  console.log(sub);
  var name;
  var posts;
  var upvotes;
  
  var ProfileFiller = React.createClass({
  
     getUser : function() {
  
     $.ajax({
              url: '/profile/' + sub,
              dataType: 'json',
              success: function(data) {
                 this.setState({user:data});
                 name = data.local.email;
  
              }.bind(this),
          error: function(xhr, status, err) {
                  console.log("error");
                 console.error(this.props.url,status, err.toString());
              }.bind(this)
          });
  
     },
  
     getInitialState: function() {
         return {
            user: []
  
         }
      },
  
  
    componentDidMount: function() {
      this.getUser();
      },
  
    render : function() {
    return(
    &lt;div&gt;
    &lt;hr/&gt;
    &lt;List user = {this.state.user} /&gt;
    &lt;/div&gt;
    )
  
    }
  });
  
  
  var List = React.createClass({
  
    render : function() {
      console.log(this.props.user);
    return (
    &lt;h1&gt;{this.props.user.name}&lt;/h1&gt; 
    )
    }
  });
  
  
  React.render(&lt;ProfileFiller  /&gt;,
  document.getElementById('profileView'));
  </code></pre>
  
  <p>I log it multiple times, and the array at my List class is initially empty, then it returns again filled with the element. I thought the ajax call is taking some time to pull the data which is why it won't work but it most likely has to do with the render and how it works, however if i set a global variable "name" and assign it to the users subfield where the ajax call takes place and pass that down as
  <code>&lt;h1&gt;{name}&lt;/h1&gt;</code> rather than <code>&lt;h1&gt;{this.props.user.name}&lt;/h1&gt;</code> it ends up working.</p>
  
  <p>I know the react way is to pass down props rather than setting variables and was kind of troubled by this.</p>
  
  <p>Here is the server side of the ajax as well:</p>
  
  <pre><code>app.get('/profile/:user', function(req, res) {
      var id = req.params.user;
      User.findById(id, function(err, user) {
          res.json(user);
      });
   });
  </code></pre>
  
  <p><strong>EDIT:</strong>
  <strong>Some solution?:</strong>
  I was able to pass it down by setting user to data.local, it seemed as if when working with props it didnt work when you went down two levels of a json, I have no idea why. So for me this.props.user.email worked vs this.props.user.local.email. So i just set user to data.local instead of just data.</p>
  
  <p><strong>Another Question:</strong>
  I also had another question, sometimes my array turns empty, and it might be because the ajax call might take a while. How do I work around something like this, would i say something like </p>
  
  <pre><code>if ajaxcall is complete/if success is complete 
     then pass down our filled array
  </code></pre>
  
  <p>But I thought setstate in our success call in our ajax would solve that. hmmm...
  Or is there a better workaround?</p>