3

I'm creating a simple app using React , Redux and Firebase. When I go to my Notification list in browser there is a warning message in console

Warning: Each child in a list should have a unique "key" prop. Check the render method of ' ProjectList '.

'ProjectList' is one of my component in my application.

How can I remove/fix this warning message ?

enter image description here

"Index.js File"

enter image description here

enter image description here

[![enter image description here][5]][5]

Nuwan Dissanayaka
  • 131
  • 2
  • 11
  • Possible duplicate of [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) – Nick May 16 '19 at 00:54

2 Answers2

4

You just need to do what it says, and add a key. It looks like you've added a key to each <ProjectSummary /> but when you map over an array and return a list of components, the key needs to be on the outermost element - in this case the <Link key={project.id}>

You don't need it on the ProjectSummary itself.

Brett East
  • 4,022
  • 2
  • 20
  • 31
  • can you tell me the code what I need to change and how can I do that. am a beginner for this stack. Thank you Brett – Nuwan Dissanayaka May 16 '19 at 01:05
  • 1
    Yep, like I said above, remove `key={project.id}` from the `` component and add it to the Link - ``. This is in the render method of your ProjectList.js file - lines 11 and 12. – Brett East May 16 '19 at 01:07
2

Just add the 'key' attribute at the uppermost Element and assign the index value to it. Add index as an argument in map() function.

{ props.posts.map((post, index) => <ProjectSummary key={index} name={post.name} />) }
Inamur Rahman
  • 2,913
  • 1
  • 27
  • 29