Cannot get rid of "Warning: Each child in a list should have a unique "key" prop."

Question

Can't get rid of "Warning: Each child in a list should have a unique "key" prop."

 const Course = () => {

    const list = course.parts.map(parts => <li key={course.parts.id}>{parts.name} {parts.exercises}</li>)
    const exerscisesOnly = course.parts.map( x => x.exercises)
    var all = 0;

    for(var i = 0; i < exerscisesOnly.length; i++){
        all = all + exerscisesOnly[i]
    }



    const Header = (props) => {
      console.log(props)
        return (
            <div>
                <h1>{props.course}</h1>
            </div>
        )
    }

I have defined the key inside course.part.map but it doesn't want to work

Edit: This was marked as a duplicate as it should be, but I am still baffled by why my {course.parts.id} did not do the same as {parts.id}. It atleast to my eyes links to the same place.

They will all be `undefined` (unless you've added an `id` property to the `course.parts` array. But even then they would all be the same) — Andreas, Nov 01 '19 at 11:26
you can use index instant of id "course.parts.map((parts, index) =>
Welcome to Stack Overflow! Please [**search**](/search?q=%5Breact%5D+Warning%3A+Each+child+in+a+list+should+have+a+unique+"key"+prop.) before posting. More about searching [here](/help/searching). — T.J. Crowder, Nov 01 '19 at 11:32
@Md.AbuSayed — Don't do that. "From reactjs.org/docs/lists-and-keys.html#keys: "We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state." (via T.J. Crowder) — Quentin, Nov 01 '19 at 11:33

Melchia · Answer 1 · 2020-12-07T22:25:43.123

1

course.parts is an array not an object so your expression course.parts.id is not valid.

Keys help React identify which items have changed, are added, or are removed. Each child in a list should have a unique ”key“

const list = course.parts.map(part => <li key={part.id}>{part.name} {part.exercises}</li>)

#Edit: Key should not be the index https://reactjs.org/docs/lists-and-keys.html#keys It should be a unique Id. There is an issue with the key being the index — if the array gets reordered or a different item is inserted into it or if a cell is removed from the array.

edited Dec 07 '20 at 22:25

answered Nov 01 '19 at 11:26

Melchia

22,578
22
103
117

1

Why the downvotes? – Melchia Nov 01 '19 at 11:27
1

This reads like a game of spot-the-difference more than an answer. It looks like you are suggesting using `parts.id` as the unique value, but there's no suggestion in the question that `parts.id` even exists. – Quentin Nov 01 '19 at 11:28
1

Your answer is right. OP maps over `course.parts` but accesses `id` from `course.parts`. You should clarify this in your answer – Oluwafemi Sule Nov 01 '19 at 11:28
It could also be that this is an *often*-repeated duplicate. – T.J. Crowder Nov 01 '19 at 11:29
It does not answer for this question, you can suggest another one like as using an index for key – Md. Abu Sayed Nov 01 '19 at 11:29
This works but why doesn't course.parts.id "find" the real keys – Samuel Nov 01 '19 at 11:33

Cannot get rid of "Warning: Each child in a list should have a unique "key" prop."

1 Answers1