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

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.

CodePudding user response：

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

CodePudding user response：

It should be

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

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

CodePudding user response：

You are assigining the same Key to each Riddles_comp

<Riddles_comp key={x.id} />

CodePudding user response：

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} />
})