title: React: initial render fires before state is set (via ajax)
body: <p>I've set things up so the <em>HomePage</em> component renders  <em>UserShow</em> for the current logged in user. For example, if a user with an ID of 2 is logged in and visits the <em>HomePage</em> page, it will render their <em>UserShow</em>.</p>
  
  <p>The "normal" <em>UserShow</em> works correctly. For example if you type in /users/18, it will properly render. However it's not working when <em>HomePage</em> renders it.</p>
  
  <p>I'm new to React (especially its lifecycle methods), so my debugging has been to throw alerts in at various steps. I'd say the most important findings to share are:</p>
  
  <ol>
  <li><em>currentUserID( )</em> is functioning and returns the correct ID </li>
  <li>Hard-coding the value of <em>state.userID</em> within <em>componentDidMount</em> causes things to work correctly</li>
  </ol>
  
  <p>These two points lead me to believe that Render is being called before it can update <em>state.userID</em> with its (correct) return value. Even more specific is that it's rendering before the <em>.success</em> portion of the <em>this.currentUserID()</em> ajax call returns. If this is so, what's the best way to go about not doing an initial render until an ajax call like this completes?</p>
  
  <p>My code is in a state of spaghetti - it's my first time doing front-end routing with JavaScript. I'm also managing sessions via using the user's email as the token in localStorage - I'm new to sessions in JS as well. Please bear with me.</p>
  
  <p><strong>HomePage component:</strong></p>
  
  <pre><code>var HomePage = React.createClass({
  
  getInitialState: function(){
      return{
          didFetchData: false,
          userID: null,
      }
  },
  
  componentWillMount: function(){
      newState = this.currentUserID()
      this.setState({userID: newState}) 
      // this.setState({userID: 2})   //hard-coding the value works
  },
  
  currentUserID: function(){
      if(App.checkLoggedIn()){
          var email = this.currentUserEmail()
          this.fetchUserID(email)
      }else{
          alert('theres not a logged in user')
      }
  },
  
  currentUserEmail: function(){
      return localStorage.getItem('email')
  },
  
  fetchUserID: function(email){ //queries a Rails DB using the user's email to return their ID
      $.ajax({
          type: "GET",
          url: "/users/email",
          data: {email: email},
          dataType: 'json',
          success: function(data){
              this.setState({didFetchData: 'true', userID: data.user_id})
          }.bind(this),
          error: function(data){
              alert('error! couldnt fetch user id')
          }
      })
  },
  
  render: function(){
      userID = this.state.userID
      return(
          &lt;div&gt;
              &lt;UserShow params={{id: userID}} /&gt;
          &lt;/div&gt;
      )
  }
  })
  </code></pre>
  
  <p><strong>UserShow component:</strong></p>
  
  <pre><code>var UserShow = React.createClass({
  
  getInitialState: function(){
      return{
          didFetchData: false,
          userName: [],
          userItems: [],
          headerImage: "../users.png"
      }
  },
  
  componentDidMount: function(){
      this.fetchData()
  },
  
  fetchData: function(){  
      var params = this.props.params.id
      $.ajax({
          type: "GET",
          url: "/users/" + params,
          data: "data",
          dataType: 'json',
          success: function(data){
              this.setState({didFetchData: 'true', userName: data.user_name, userItems: data.items, headerImage: data.photo_url})
          }.bind(this),
          error: function(data){
              alert('error! couldnt load user into user show')
          }
      })
  },
  
  render: function(){
      var userItem = this.state.userItems.map(function(item){
          return &lt;UserItemCard name={item.name} key={item.id} id={item.id} description={item.description} photo_url={item.photo_url} /&gt;
      })
      return(
          &lt;div&gt;
              &lt;Header img_src={this.state.headerImage} /&gt;
  
              &lt;section className="body-wrapper"&gt;
                  {userItem}              
              &lt;/section&gt;
          &lt;/div&gt;
      )
  }
  })
  </code></pre>