React warning: Each child in a list should have a unique "key" prop

Question

```jsx
{todos.map((t, i) => <TodoItem todo={t} />)}
```

I get the key warning. If I use `key={i}` it goes away. Is the index OK as a key?

Accepted Answer

React uses `key` to match list items between renders. Use a **stable, unique id from your data**:

```jsx
{todos.map(t => <TodoItem key={t.id} todo={t} />)}
```

The index is only safe if the list is **never reordered, filtered, or inserted into**. Otherwise React reuses the wrong component instance, and you get bugs like an input keeping the text of the item that was deleted.

If your items have no id, generate one when you *create* the item (`crypto.randomUUID()`), not during render.

1 réponse