Warning - Each child in a list should have a unique "key" prop

Question

Got a Warning: Each child in a list should have a unique "key" prop. I cant figure out which key I need to use.

<td className="banana-td">
                    {todos.map((todo, index) => (
                        <BananaBullet
                            key={index.id}
                            value={todo.date}
                            completed={todo.completed}
                            onClick={() => 
           toggleTodo(todo.id)}
                        />
                    ))}
                </td>

                <td className="task-td">
                    {todos.map((todo, index) => (
                        <TodoContainer
                            key={index.id}
                            text={todo.text}
                            completed={todo.completed}
                            toggleTodoItem={() => 
          toggleTodo(todo.id)}
                        />
                    ))}
                </td>
                <td>
                    {todos.map((todo, index) => (
                        <DeadlineList
                            key={index.id}
                            value={todo.date}
                            completed={todo.completed}
                            onClick={() => 
                 toggleTodo(todo.id)}

I red the react guidelines, but it doesnt help me understand how to use it in my case

Does this answer your question? [Warning: Each child in an array or iterator should have a unique "key" prop. Check the render method of \`ListView\`](https://stackoverflow.com/questions/34576332/warning-each-child-in-an-array-or-iterator-should-have-a-unique-key-prop-che) — Praveen Kumar Purushothaman, Sep 26 '20 at 20:18
https://codesandbox.io/s/frosty-night-pytse?file=/src/components/TodoList.js — FilipZafran, Sep 26 '20 at 20:19

score 2 · Accepted Answer · answered Sep 26 '20 at 20:16

2

index is a number, not an object. Just index is enough.

key={index}

answered Sep 26 '20 at 20:16

kind user

40,029
7
67
77

score 2 · Answer 2 · answered Sep 26 '20 at 20:19

2

In your code, you have mentioned:

key={index.id}

This will not work because, key is a number / integer. All you need to do is:

key={index}

If I understand what you're trying to do, then you should be doing:

key={todos[index].id}

answered Sep 26 '20 at 20:19

Praveen Kumar Purushothaman

164,888
24
203
252

score 0 · Answer 3 · answered Sep 27 '20 at 03:25

It looks like your todo object has a unique field on it (id), so you can put in todo.id as the key. This is far better than using an index value, since React may get confused with ordering during state updates. Do this for the BananaBullet, TodoContainer, and DeadlineList. For example:

<BananaBullet
  key={todo.id} // change here
  value={todo.date}
  completed={todo.completed}
  onClick={() => toggleTodo(todo.id)}
/>

Warning - Each child in a list should have a unique "key" prop

3 Answers3

Linked