title: Cannot Read Property map of undefined
body: <p>For some reason it sometimes maps through, but I get another error of not returning anything and other times it just says can't read property map of undefined. I'm trying to compile a list of users in React.</p>
  
  <p>I have a component called UserList that is querying my database for all users and updating the state: </p>
  
  <pre><code>const UserList = React.createClass({
    getInitialState: function () {
      return {
        users: []
      }
    },
    componentDidMount: function () {
      this.loadUsersFromServer();
    },
    loadUsersFromServer: function () {
      axios.get('/api/users').then((users) =&gt; {
        this.setState({users: users.data.users});
      });
    },
    render: function () {
      return (
        &lt;div&gt;
  
          &lt;h1&gt;User List&lt;/h1&gt;
  
          &lt;User
            users={this.state.users}
          /&gt;
  
        &lt;/div&gt;
      );
    },
  });
  </code></pre>
  
  <p>I'm then passing it to it's child component User, and that is where the error is coming into play:</p>
  
  <pre><code>const User = React.createClass({
  
  
    render: function () {
      console.log('props: ' + JSON.stringify(this.props.users));
  
      const users = this.props.users.map((user) =&gt; {
        return (
          &lt;User
            key={user._id}
            username={user.username}
          /&gt;
        );
      });
  
      return (
        &lt;div id="users"&gt;
          {users}
        &lt;/div&gt;
      );
    },
  });
  </code></pre>
  
  <p>What is interesting in the Chrome Dev tools is that for some reason I get three logs when trying to print out the this.props.users, and I'm not sure why it logs out three, but the middle one has all the users I'm looking for:</p>
  
  <p><a href="https://i.stack.imgur.com/Qlf8R.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qlf8R.png" alt="logs of this.props.users"></a></p>
  
  <p>Any help would be greatly appreciated!</p>