Cannot Read Property map of undefined

Question

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.

I have a component called UserList that is querying my database for all users and updating the state:

const UserList = React.createClass({
  getInitialState: function () {
    return {
      users: []
    }
  },
  componentDidMount: function () {
    this.loadUsersFromServer();
  },
  loadUsersFromServer: function () {
    axios.get('/api/users').then((users) => {
      this.setState({users: users.data.users});
    });
  },
  render: function () {
    return (
      <div>

        <h1>User List</h1>

        <User
          users={this.state.users}
        />

      </div>
    );
  },
});

I'm then passing it to it's child component User, and that is where the error is coming into play:

const User = React.createClass({


  render: function () {
    console.log('props: ' + JSON.stringify(this.props.users));

    const users = this.props.users.map((user) => {
      return (
        <User
          key={user._id}
          username={user.username}
        />
      );
    });

    return (
      <div id="users">
        {users}
      </div>
    );
  },
});

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:

Any help would be greatly appreciated!

I'm very new to React myself, so I'm mostly following along to see other people's answers. But, I'm using the extends React.Component syntax which gives me a constructor to use for initial state. I don't have the problem of the empty array [] trying to render using that syntax. — Danny Ellis Jr., Jan 31 '17 at 17:37
Yeah, I mean I could try that I suppose ... I just know that's two different ways of writing the same thing, so I can't imagine that would be the issue. Or at least I somewhat hope the issue wouldn't be that ha. — Taylor King, Jan 31 '17 at 17:42
In your User class render method. You're rendering a bunch of User components. This is some kind of recursive self-reference that I don't really understand. In your map function do you want to return a
or something rather than a ? — Tom Coughlin, Jan 31 '17 at 17:42
The first time your map function runs, you're creating a component that has 'key' and 'username' props, so the 'users' prop is undefined at that moment. — Tom Coughlin, Jan 31 '17 at 17:45
@TomCoughlin ah ... good point. Do I even need to map it into a component, or could I just put it into a div? — Taylor King, Jan 31 '17 at 17:45
@TomCoughlin you are right ... I need to move my map over to the UserList putting the User component in there. I haven't tried it yet, but I'm like 99% sure that will fix the issue. — Taylor King, Jan 31 '17 at 17:50

score 1 · Accepted Answer · answered Jan 31 '17 at 17:53

You could try putting the users rendering logic in a method of your UserList class. Something close to this should work.

const UserList = React.createClass({
  getInitialState: function () {
    return {
      users: []
    }
  },
  componentDidMount: function () {
    this.loadUsersFromServer();
  },
  loadUsersFromServer: function () {
    axios.get('/api/users').then((users) => {
      this.setState({users: users.data.users});
    });
  },
  renderUsers: function (users) {
    return <div>{users.map(user => <div key={user._id} username={user.username} />)}</div>
  },
  render: function () {
    return (
      <div>
        <h1>User List</h1>
        { this.renderUsers(this.state.users) }
      </div>
    );
  },
});

Yup! I believe that will work ... I'm going to rework this in a bit to do as such, and I will give you the answer. Thanks so much for pointing that out! — Taylor King, Jan 31 '17 at 17:55

score 0 · Answer 2 · edited May 23 '17 at 11:54

At some moment (second refresh) this.props.users looks undefined and the map function cannot handle it.

I rewrote the example using React.Component syntax since I never worked with the old React (before V0.13) syntax.

Check more on different syntax here.

However, this part:

const User = React.createClass({
  render: function () {
    console.log('props: ' + JSON.stringify(this.props.users));

    const users = this.props.users.map((user) => {
      return (
        <User
          key={user._id}
          username={user.username}
        />

looks strange. I think you used User inside User.

Here is how I rewrote it, with some minor modification since I haven't user axios.

class UserList extends React.Component{
  constructor(props){
    super(props);      
    this.state = { users : []  };
  }  
  componentDidMount() {    
    this.loadUsersFromServer();    
  }
  loadUsersFromServer(){      
    this.setState({users: 
                  
                  [{
  "_id": 1,
  "username": "Nicole",
  "password": "0uTjaH",
  "_v": "7.6.9"
}, {
  "_id": 2,
  "username": "Steve",
  "password": "22l8h6a8NPU",
  "_v": "7.41"
}, {
  "_id": 3,
  "username": "Joyce",
  "password": "yA3efEc",
  "_v": "6.3"
}, {
  "_id": 4,
  "username": "Todd",
  "password": "7LsQ9aHqIfhy",
  "_v": "7.1"
}, {
  "_id": 5,
  "username": "Maria",
  "password": "uHZ5fkCi04v",
  "_v": "9.31"
}]
                  
                  
                  });
  }
  
  render(){    
    return (
      <div>
        <h1>User List </h1>
        <User users={this.state.users}   />
      </div> 
    );
  }
};

class User extends React.Component{
  constructor(props){
    super(props);
  }
  
  render(){
    console.log(typeof(this.props.users));
    //console.log(this.props.users);

    //const user = JSON.stringify(this.props.users);
    
    const userList = this.props.users.map((user) => {
      return (
        <div>
          <span>key={user._id}</span>
          <span>username={user.username}</span>
        </div>
      );
    });

    return (
      <div id="users">
        {userList}
      </div>
    );
  }
  
}

ReactDOM.render(<UserList /> , document.getElementById('root') );

span {padding: 3px}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

This doesn't solve the issue for me, unfortunately. :/ I had seen that suggested elsewhere as well, but I went ahead and tried it again. Still nothing. — Taylor King, Jan 31 '17 at 17:43

Cannot Read Property map of undefined

2 Answers2