CODEWITHSUNDEEP
reactjs
gregmakasoff
gregmakasoff

Reputation: 1

React Error – Each child in a list should have a unique “key” prop only on the first component rendered

So I am trying to clean up some errors on my project and this one seems to want to stick around.

Warning: Each child in a list should have a unique "key" prop.

However, I only get this error on the first component that is rendered, and I am already supplying it a key. Here is the section of code in question.

bookings.list.map((request) => (
              <RequestListItem request={request} key={request.id}/>
            ))

Any suggestions on how to fix this? I have already tried adding a timeout, but the extra time didn't change anything.

Upvotes: 0

Views: 97

Answers (1)

user16435030
user16435030

Reputation:

When you're looping over react components and generating a list they each need a unique key.

bookings.list.map((request, index) => (
  <RequestListItem key={index} request={request}/>
))

What you're doing seems fine but no need to use a custom name or id, just receive the second index arg and use it. (However your code should probably work if that id actually exists and is unique.

Upvotes: 1

Related Questions