How to Fix 'Each child should have a unique key prop?-CodePudding

Hi everyone I would like to display for each element all of its sub-documents.

  <div><ul>{designModdulles.map((designModdulle)=><li key={designModdulle.epreuves.nature_epreuve}>{designModdulle.epreuves.nature_epreuve}</li>) }</ul></div>
```
I wanted the sub documents to be displayed` in a map
but i had: Warning: Each child in a list should have a unique "key" prop.

CodePudding user response：

Assuming this is JavaScript, the cause of the issue is that there are duplicate key values. You can use the index of each map entry to create a new key

<div><ul>{designModdulles.map((designModdulle, index)=><li key={designModdulle.epreuves.nature_epreuve   index}>{designModdulle.epreuves.nature_epreuve}</li>) }</ul></div>

You may want to look at the following to see what your choices are (there are other resources as well): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map

CodePudding user response：

the problem of the key is resolved, but nothing is displayed in the

tag