0

I have two react components, an outer one called UserManagement and another one called UserList, which is used once as a subcomponent. I'm getting this familiar error message in my Chrome console:

Each child in an array or iterator should have a unique "key" prop. Check the render method of `UserList`.

Here's my UserList's render method:

render() {
  const { users, filteredUsers, filter } = this.props.userStore;
  return (
    <div>
      { filteredUsers.map(user=><div key={user.id}>{user.username}</div>) }
    </div>
  );
}

As you can see, there's nothing exotic here and the list does work as expected, but still there is the aforementioned error message. I also tried changing back the arrow functions to "oldschool" functions, btw.

This is the render method of my outer component UserManagement where I use the UserList as seen above:

render() {
  const { users, filteredUsers, filter } = this.props.userStore;
  return (
    <div>
      <h4>User Management:</h4>
      <UserList userStore={this.props.userStore} />
    </div>
  );
}
Rob
  • 11,492
  • 14
  • 59
  • 94
  • Make sure that your user.id is unique – Shubham Khatri Jun 22 '17 at 04:46
  • It is, this is a unique MongoDb GUID, besides that there's only one user in that list a.t.m. – Rob Jun 22 '17 at 04:48
  • 1
    In UserList you are using the props as `const { users, filteredUsers, filter } = this.props.userStore;` however you are passing it by the name `store` – Shubham Khatri Jun 22 '17 at 04:51
  • Sorry, I was copying the code from an older version, the userStore is passed correctly, I've edited the code part in my question. – Rob Jun 22 '17 at 04:58
  • 1
    I would double check if `{user.id}` does actually have values, also you may try to pass the incremental index of the map function as a key in order to test it – ricardoorellana Jun 22 '17 at 05:07
  • go through this answer https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js – Ashh Jun 22 '17 at 05:08

0 Answers0