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.

score 0 · Answer 1 · answered Nov 09 '22 at 17:47

0

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

answered Nov 09 '22 at 17:47

ChrisSc

276
2
9

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

Mouni19

Nov 10 '22 at 20:16

It may be that there are no values in `designModdulle.epreuves.nature_epreuve`, or there's an empty string. A missing value would also explain why the key warning was occurring. – ChrisSc Nov 13 '22 at 18:03

score 0 · Answer 2 · answered Nov 10 '22 at 20:15

0

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

tag

answered Nov 10 '22 at 20:15

Mouni19

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Nov 15 '22 at 12:49
Hello,this is the result in json format ,how can i choose a key and display the code_epreuve in the map – Mouni19 Dec 13 '22 at 02:33

score 0 · Answer 3 · edited Dec 20 '22 at 03:44

0

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

edited Dec 20 '22 at 03:44

U13-Forward

69,221
14
89
114

answered Dec 17 '22 at 17:20

Mouni19

1
1

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

3 Answers3