Unique "key" props with map in React

Question

Each sibling has an id, but still doesn't work. Passed the id inside the first div and still asking for different id. I don't understand ths issue here. Is my id recognized and with the good type ? Or do I need to put another div with only the id before this one ?

import React from 'react';
import listProjects from "./JSONdata/projects.json"

export default function Project(){
    return(
        <div className="projectList">
        {listProjects.projects.map(project => (
            displayProject(project)
        ))}
        </div>
    )
}

function displayProject(project){
    return(
        <>
            <div className="projectContainer">
                <div className="imgContainer">
                </div>
                <div className="nameProject">
                    <a href={project.gitlabLink}><p>{project.name}</p></a>
                </div>
                <div className="technologiesProject">
                    {
                        project.technologies.map(({techno, id}) =>(
                            <div className={`${techno}Container`} key={id}>
                                <p>{techno}</p>
                            </div>

                        ))
                    }
                </div>
            </div>
        </>
    )
}

And the data from JSON looks like this

{
    "projects": [
        {
            "name": "PoE AiO",
            "gitlabLink": "",
            "technologies": [
                {
                    "id": "1",
                    "techno": "html"
                },
                {
                    "id": "2",
                    "techno": "css"
                },
                {
                    "id": "3",
                    "techno": "jquery"
                }
            ]
        },
        {
            "name": "ESO AiO",
            "gitlabLink": "",
            "technologies":[
                {
                    "id": "1",
                    "techno": "html"
                },
                {
                    "id": "2",
                    "techno": "css"
                },
                {
                    "id": "3",
                    "techno": "bootstrap"
                }
            ]
        },

Does this answer your question? [Understanding unique keys for array children in React.js](https://stackoverflow.com/questions/28329382/understanding-unique-keys-for-array-children-in-react-js) — jharris711, Mar 29 '21 at 12:38
You have done it correctly for the `technologies` map, but the `projects` map still has no key. — DBS, Mar 29 '21 at 12:52
1. your projects have no key. 2. your fragment tags are obsolete — Martin, Mar 29 '21 at 12:59
displayProject(project) put between a div and give a key them. — Dániel Boros, Mar 29 '21 at 13:05

score 1 · Accepted Answer · answered Mar 29 '21 at 12:47

You can do it this way in React.

import React from 'react';
import listProjects from "./JSONdata/projects.json"
export default function Project(){
    return(
        <div className="projectList">
        {listProjects.projects.map((project, index) => (
            <displayProject project={project} key={index} />
        ))}
        </div>
    )
}


function displayProject({project} ){
    return(
        <>
            <div className="projectContainer">
                <div className="imgContainer">
                </div>
                <div className="nameProject">
                    <a href={project.gitlabLink}><p>{project.name}</p></a>
                </div>
                <div className="technologiesProject">
                    {
                        project.technologies.map(({techno, id}, index) =>(
                            <div className={`${techno}Container`} key={index }>
                                <p>{techno}</p>
                            </div>

                        ))
                    }
                </div>
            </div>
        </>
    )
}

Unique "key" props with map in React

1 Answers1