CODEWITHSUNDEEP
reactjs
user14232549
user14232549

Reputation: 413

Warning: Each child in a list should have a unique "key" prop. in react. Actually the array has a key

I don't know why this error happen. The "projects" have a key each.

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

Check the render method of `ProjectList`. See https://reactjs.org/link/warning-keys for more information.
    at Link (http://localhost:3000/static/js/vendors~main.chunk.js:98148:31)
    at ProjectList (http://localhost:3000/static/js/main.chunk.js:2233:3)
    at div
    at div
    at div
    at Dashboard (http://localhost:3000/static/js/main.chunk.js:754:1)
    at FirestoreConnect(Dashboard) (http://localhost:3000/static/js/vendors~main.chunk.js:93335:11)
    at Connect(FirestoreConnect(Dashboard)) (http://localhost:3000/static/js/vendors~main.chunk.js:96289:28)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:98747:29)
    at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:98949:29)
    at div
    at Router (http://localhost:3000/static/js/vendors~main.chunk.js:98382:30)
    at BrowserRouter (http://localhost:3000/static/js/vendors~main.chunk.js:98002:35)
    at App
    at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:96124:26)


call from https://github.com/iamshaunjp/React-Redux-Firebase-App/blob/lesson-39/marioplan/src/components/dashboard/Dashboard.js

The code

const ProjectList = ({projects}) => {
    return (
        <div className="project-list section">
            {projects && projects.map(project => {
              return (
                <Link to ={'/project/' + project.id}>
                <ProjectSummary project = {project} key = {project.id} />
                </Link>
              )
            })}
        </div>
              )}

export default ProjectList;

console.log("ProjectsSample" + JSON.stringify(projects));

ProjectsSample {"70Vy1qTygmot82hLTXqM":{"createdAt":{"seconds":1614322423,"nanoseconds":379000000},"content":"EE　JUMP","title":"おっとっと冬だぜ","authorUserName":"Zeke","authorId":"kvxg96HGuzL2vtoDS9G8FZSa8E53","answers":{"RFv6bJMG2dmiBqWNZX8O":{"content":"これが・・"}}},"9A2cvtlOoaNHnJ9uxBCi":{"createdAt":{"seconds":1614678213,"nanoseconds":459000000},"authorId":"qzTZftjdF3NIr7TZ3kiC9hbgDym1","title":"tsukuda","authorUserName":"tsukuda","content":"desu."},"DqsnHsTEEY9ztExWuuCQ":{"authorId":12345,"title":"Tite","content":"arataihen","authorLastName":"Ninja","authorFirstName":"Net","createAt":{"seconds":1613974658,"nanoseconds":763000000}}}

Upvotes: 1

Views: 175

Answers (1)

rustyBucketBay
rustyBucketBay

Reputation: 4551

Giive a shot to the docs. As explained in the docs Keys help React identify which items have changed, are added, or are removed. The important highlight on this regard is that Keys used within arrays should be unique among their siblings. However they don’t need to be globally unique.

This said, when this happens you usually need to move the 'key' property up in the hierarchy if you are mapping sibling components as Mr Mairaj suggested in the comments.

const ProjectList = ({projects}) => {
    return (
        <div className="project-list section">
            {projects && projects.map(project => {
              return (
                <Link to ={'/project/' + project.id} key = {project.id} > //moved to parent here
                <ProjectSummary project = {project} />
                </Link>
              )
            })}
        </div>
              )}

export default ProjectList;

Upvotes: 2

Related Questions