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

Question

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.

Answer 1

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

Answer 2

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

tag

Answer 3

hello everyone here is the solution:

<ul><li>{designModdulles.map((item,index)=>(<div key={index}>{item.epreuves.map((c, i)=>(<div key={i}>
       <h3>{c.code_epreuve}</h3><Button>Insérer notes</Button><Button>Supprimer</Button> </div>) )}</div>))}</li></ul>

thank you