CODEWITHSUNDEEP
reactjsobjecterror-handlingkey
Frenom
Frenom

Reputation: 33

Warning: Each child in a list should have a unique "key" prop - already assigned key

I am getting this error:

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at Easy
    at div
    at Central
    at div
    at Main
    at App

I wrote the following code.


import React from 'react'
import Riddlees_comp from './riddlees_comp'


function Easy() {


const riddles_ = [{
   id:1,
   state_:[],
},
   {
   id:2,
   state_: false,
   }]

   return (
       riddles_.map(function(x){
           return <Riddlees_comp key={riddles_.id} riddles_ = {x} />
       })
   )
}

export default Easy

I am getting this error even though I already assigned a key to the function. What am I doing wrong? Thank you very much.

Upvotes: 0

Views: 81

Answers (4)

Giorgi Gvimradze
Giorgi Gvimradze

Reputation: 2129

To guarantee that the key is unique, it's best to use an index identifier instead, if you don't plan to reuse the key variable in the component again. Popular practice is:

riddles_.map(function(x,index){
    return <Riddlees_comp key={index} riddles_ = {x} />
})

Upvotes: 0

Sebastian
Sebastian

Reputation: 474

You are assigining the same Key to each Riddles_comp

<Riddles_comp key={x.id} />

Upvotes: 0

Khaled Ahmed
Khaled Ahmed

Reputation: 46

key={x.id} instead of key={riddles_.id}

Upvotes: 1

Cem Karakurt
Cem Karakurt

Reputation: 241

It should be

<Riddlees_comp key={x.id} riddles_ = {x} />

Change key={riddles_.id} to key={x.id}

Upvotes: 0

Related Questions