Fix 'Each child in a list should have a unique key prop' in React

This is a warning, not a crash — but ignore it and you will eventually ship a bug where list items show the wrong state after sorting or deleting. Here is what keys actually do and how to fix the warning correctly.

Why React Needs Keys

Keys tell React which DOM node maps to which item between renders. With stable keys, React can move, add, and remove the right elements instead of rebuilding the whole list — that is both a correctness and a performance feature.

The Fix: Use a Stable, Unique ID

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

Why You Should Avoid the Array Index

key={index} silences the warning but reintroduces the bug it was protecting you from. When the list reorders or an item is removed, indexes shift and React reuses the wrong component instance — inputs keep old values, animations glitch, checkboxes tick the wrong row.

// ⚠️ Acceptable ONLY if the list is static and never reorders
{items.map((item, index) => <li key={index}>{item}</li>)}

// ✅ Prefer a real unique id
{items.map((item) => <li key={item.id}>{item.label}</li>)}