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

Hi got the warning that told me that each child in a list should have a unique key prop. My component have it, but the warning keep showing up.

I think it's cause i insert Component inside another Component, if someone can tell me how to fix it please ?

Here is my differents files :

Here is my query (index.js):

posts: allMarkdownRemark(
        filter: {fileAbsolutePath: {regex: "/posts/"}}, 
        limit: 5
        sort: {fields: frontmatter___date, order: DESC}) {
        edges {
            node {
              frontmatter {
                date(formatString: "DD MMMM YYYY", locale: "fr-FR")
                slug
                title
                excerpt
              }
              html
              id
            }
        }   
    }

My index.js :

const projects = data.projects.edges
<Projects projects={projects}/>

My projects.js

    return (
    <>
        {projects.map(project => (
            <Project key={project.id} project={project}/>
        ))}
    </>
)

My project.js

    return (
    <Col className="h-100" key={project.node.id} xs="12" md="6" lg="4">
        <div className="card p-5 h-100">
            <h3 className="text-center">{project.node.frontmatter.title}</h3>
            <div className="tags">
                {project.node.frontmatter.source && (
                    <a href={project.node.frontmatter.source} target="_blank" rel="noreferrer">Source</a>
                )}
                {project.node.frontmatter.demo && (
                    <a href={project.node.frontmatter.demo} target="_blank" rel="noreferrer">Démo</a>
                )}
            </div>
            <div className="mt-4" dangerouslySetInnerHTML={{__html: project.node.html}}>
            </div>
        </div>
    </Col>
)

CodePudding user response：

In your projects loop, project.id is undefined so the key is not valid (because it's not different in each iteration). Try using:

return (
<>
    {projects.map(project => (
        <Project key={project.node.id} project={project}/>
    ))}
</>

CodePudding user response：

Also you can use like this way

return (
<>
    {projects.map((project,key) => (
        <Project key={key} project={project}/>
    ))}
</>