Why should you care?

Without keys, React may update the wrong DOM nodes when the list reorders — causing bugs and lost input focus.

See it live — copy this example

Paste into src/App.jsx (or the file noted in the steps). Save and watch the browser update.

const todos = [
  { id: 1, text: 'Buy milk' },
  { id: 2, text: 'Call mom' }
];

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

Run Example »

Edit the code and click Run to see the result update live.

What happened?

• key={todo.id} should be stable and unique among siblings.
• Use database ids, not array index, when items can be reordered or deleted.

Try it yourself

1. Map an array to
2. or table rows.
3. Add key from a unique id field.
4. Filter the array before map if needed.
5. Change text or labels in the example and save — watch the browser update.
6. Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

Use .map() to render lists. Always add a stable unique key. Prefer id over index when list changes.