{Solved} React with unique key props issue

Question

I have just created a React app, it can generate result as I expected. However the React gives an warning of unique key props are needed for all the iterators.

The warning persists, even though I have added all the key props wherever there is map function iteration. Did I miss something?

https://code.sololearn.com/WjbVk37DHbgM/?ref=app

PS. The code was originally created by Gordon, I modified it to work with React functions for testing React Hooks features.

Answer 1

Calviղ the key on Course (line 130) is on the inner element

The key should be on the wrapping div element

Answer 2

I saw the keys are all literal templates and supposed to include an index number in naming the keys.

So, I make a slight edit:

https://code.sololearn.com/WHm5XCQs0VZe/?ref=app

I tried to display the innerHTML to see which key are repeated.

The result is not very satisfactory. Because it seems that the keys attributes are not kept after rendering.

If there is a way to console log the keys once they are made.
We may be able to at least identify our target to debug.

Answer 3

Ohh.. Now I see the issue, thank you Burey.

The code should be
const Courses = ({courseItems}) => (
<div>
{ courseItems.map((c,i) => <Course key={'course'+i} courseItem={c} />)}
</div>
);

Answer 4

Gordon thanks for showing the code from the app element, didn't aware it could be checked in this way. 👍

Answer 5

For information only,
Original source was coded by Gordon with vallina JavaScript.
https://code.sololearn.com/WW7fwgNfS2jP/?ref=app

Answer 6

Const course=({courseItems})=>(<div>

Answer 7

could i make a code that would tell my HP notebook which programs do i need to reinstall so that i can get wi-fi if anybody knows please tell me