← All errors

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

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

In one sentence: When you render a list with .map(), React needs a stable, unique key on each item to track them.

What it means

React uses keys to tell list items apart between renders. Without them (or with duplicates), React may reuse the wrong element, which causes bugs like inputs keeping the wrong value or animations jumping.

It's a warning, not a crash, but it's worth fixing.

Common causes

• No `key` on the top element returned from `.map()`.
• The key is on an inner element instead of the outermost one (or a Fragment needs `<Fragment key=...>`).
• Duplicate keys, e.g. using a name that isn't unique.

How to fix it

1. Add `key` to the outermost element in the map, using a stable unique id from your data: `key={item.id}`.
2. Avoid `Math.random()` as a key (it changes every render). Use the array index only if the list never reorders, filters, or gets inserted into.

{todos.map(todo => (
  <li key={todo.id}>{todo.title}</li>
))}

Prompt to paste into your AI tool

React warns each child in a list needs a unique key. Add a stable key from the data (like id) to the outermost element in every .map, not Math.random or index if the list can change.

Related errors

• TypeError: Cannot read properties of undefined
• CORS error: blocked by CORS policy
• Hydration failed: server HTML didn't match the client (Next.js)
• Module not found: Can't resolve '...'