React "Each child in the list should have a unique 'key' prop"

Question

I'm learning React and I am having this issue. I've already looked at several stack posts but so far they are not helping me. The issue is, I am 100% positive that my items have a unique key. They are coming from a database, and the primary key DB value is being used in the "key=" attribute. The only possible way they could not be unique is if React is trying to render the array more than once.

I added a wrapper <div> so I could debug out the values so that I could visually ascertain my ids/keys were unique.

Here is my Project.jsx export. In this case, the Project element is a styled.div, but I have tried just a regular div too.

export default ({ project }) => (
  <div key={project.id}>
    <!-- DEBUG -->
    <span>id: {project.id}; name: {project.name}</span>
    <!-- /DEBUG -->
    <Project>
      <NavLink to={`/projects/${project.id}`}>{`${project.name}`}</NavLink>
    </Project>
  </div>
)

And it is called from my Projects.jsx, like this (there's more to the template, but this is the relevant bit):

<div className="projects">
  <Title />
  <div className="card">
    {
      projectList.map(project => (<Project project={project} />))
    }
  </div>
</div>

Here is a screenshot of the array projectList: chrome devtools logging out projectList, you can see that each element has as unique "id" property.

Things I have tried:

1. using React.fragment https://github.com/facebook/react/issues/15620
2. moving "key=" to the topmost element (it was there already when Project was the topmost element, but I moved it when I added the debugging out div): (closed the link and can't find it :( )
3. using key={Math.Random()}, which still produced these errors, but it didn't print the list twice or anything

The site still seems to work fine, the links work and everything, it's just a big ugly error in the console (and since this is for a resume, I really don't want any of that!!).

Can someone please help?

Answer 1

you need to provide a key at the highest level in your map, which is your Project component

<div className="projects">
  <Title />
  <div className="card">
    {
      projectList.map(project => (<Project project={project} key={project.id}/>))
    }
  </div>
</div>