React Warning: Each Child Should Have a Unique Key Prop — What It Means & How to Fix It

What Does This Error Mean?

This warning means you are rendering a list of elements using .map() but have not given each element a unique key prop. React needs keys to efficiently update the list when items are added, removed, or reordered. Without keys, React re-renders the entire list every time it changes — which is slower and can cause subtle bugs.

Affected Models

React 16 and later
All React components that render lists

Common Causes

Using .map() to render a list without adding a key prop to the top-level element returned
Using the array index as a key when items can be reordered or deleted
Using a non-unique value as a key — two items in the list share the same key
Forgetting to add a key when rendering a list from a database or API response
Rendering multiple elements inside an array without keys

How to Fix It

Add a key prop to the outermost element returned from your .map() function. The key must be a string or number that uniquely identifies each item.

Example: {items.map(item => <li key={item.id}>{item.name}</li>)}
Use a unique ID from your data as the key. If your objects have an id, userId, or similar unique identifier, use that.

Database IDs are perfect for this — they are guaranteed to be unique and stable.
Avoid using the array index as a key when items can be reordered, deleted, or inserted. Use a stable unique ID from the data instead.

Using indexes is only acceptable if the list never changes order and items are never deleted — like a static settings list.
If your data does not have a unique ID, add one. You can generate a UUID when creating items, or use a library like uuid (npm install uuid) to create unique IDs.

Do not use Math.random() as a key — it creates a new key every render, which defeats the purpose of keys.
The key must be on the top-level element of the mapped output. If you return a component, the key goes on the component tag, not inside the component.

Correct: items.map(item => <MyCard key={item.id} item={item} />) — the key is on MyCard, not on elements inside MyCard.

When to Call a Professional

This is always fixable yourself. Add a key prop with a unique stable ID from your data. This is one of the easiest React issues to fix once you know about it.

Frequently Asked Questions

Why does React need keys on list items?

React uses keys to match elements between renders. When a list updates, React checks the keys to decide which items are new, which are updated, and which are removed. Without keys, React has to guess — and its guess (based on position) is often wrong when items are reordered or inserted. Keys make list updates correct and efficient.

Can the key be the same as another prop I pass to the component?

Yes — if your component receives an id prop, you can use the same value for both. Note that key is not accessible inside the component as a prop — React uses it internally. If you need the ID inside the component, pass it as a separate prop too: <MyCard key={item.id} id={item.id} item={item} />

This is a warning, not an error. Can I just ignore it?

You should not ignore it. While your app may seem to work, missing keys cause subtle bugs: items might not update correctly when the list changes, form state might jump to the wrong item, and animations might behave unexpectedly. Fixing the key warning also improves your app's performance.