CODEWITHSUNDEEP
reactjs
James Smith
James Smith

Reputation: 125

Child list unique key prop even when using a unique key in react

I am getting an error, Each child in a list should have a unique "key" prop. in a react app. I initially used user.id as the key but after some reading found out that react expects the key to be a string. I have now changed it to user.username but still getting the error.

I have printed the user.username value out to console to confirm that it is a string and are unique.

this is my code for mapping over object and displaying them

            {this.state.page.content.map((user) => (
              <div className="col-xl-4 col-m-12 mb-4">
              <UserListItem key={user.username} user={user} />
              {console.log(user.username)}
              </div>
            ))}

Upvotes: 0

Views: 35

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 371138

The key needs to be at the topmost element returned - putting the key in a child element (where that child is the only child) won't achieve anything. You need:

{this.state.page.content.map((user) => (
  <div key={user.username} className="col-xl-4 col-m-12 mb-4">
    <UserListItem user={user} />
  </div>
))}

Upvotes: 1

Related Questions