The key attribute

Learn why every list item needs a unique key.

The key attribute

React asks you to give each node in a list a key so it can tell which item was added or removed. The key is the item's unique identity.

You write the key directly on the <li>: <li key={item.id}>. React reads the keys to find which li changed and updates only that one.

Keys must be unique among siblings, not across the whole list. The same key is never used twice.

Choosing a stable key

The best key is a field already in the data that is unique: id, email, username. If no such field exists, add an id to the data.

Generating a key from Math.random() is wrong: a new key appears on every render and React redraws everything.

Counters (0,1,2) only work when items are appended and never removed.

Exercise ListWithKeys component

Complete the skeleton. Write a ListWithKeys component. The items array has id and name on each item. With .map() turn each item into <li key={item.id}>{item.name}</li>. Export it.

Show example solution

function ListWithKeys() {
  const items = [{ id: 1, name: "Alex" }, { id: 2, name: "Sam" }];
  return <ul>{items.map(item => <li key={item.id}>{item.name}</li>)}</ul>;
}

export default ListWithKeys;

Test yourself

The key attribute: fill in the missing part

<li key={____}>{item.name}</li>

Show answer

<li key={item.id}>{item.name}</li>

When does using the array index as key cause trouble?
```
React wants stable identity; the index is not stable.
```
- Never
- Only in big lists
- When items are added or removed
- Only with text
Show answer

When items are added or removed — Inserting or removing shifts the index, so React updates the wrong node.
The key attribute: match the terms

id field

Best key
Math.random()

Wrong key
index

Append-only lists
same key twice

Forbidden

Next lesson: Array to components

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies