Lists & Keys

A list in React is what you get when you transform an array into UI with .map() — one element per item. Each of those elements needs a key : a stable, unique id React uses to track rows when the list changes. Get keys right and updates are fast and correct; get them wrong and you'll see warnings and glitchy rows.

Learn Lists & Keys in our free React course — a beginner-friendly interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ Rendering a List with .map()

You don't write repeated rows by hand. Take an array and call .map() , which returns a new array with one element per item. React renders that array as a list.

2️⃣ Keys from Real Data

Real lists are arrays of objects , and each object usually has a unique id . Use that id as the key — it's stable, so React can track each row across renders even as the list changes.

Your turn — the single most common React pattern. Map objects, using id as the key and name as the text:

3️⃣ Why the Index Is a Bad Key

It's tempting to write key={' '} , and it even silences the warning — but it's a trap. When the list reorders, inserts, or deletes, the index of an item changes, so React thinks a different item now lives at that key. The result: reused DOM in the wrong place, stale input values, and broken animations. Only use the index when the list is static and never changes.

These lines render a keyed list inside a component. Put them in the right order:

📋 Quick Reference

1. Which array method turns data into a list of elements?

.map() — it returns a new array with one element per item.

2. You delete the first item of a 3-item list keyed by index. What can go wrong?

The remaining items' indexes shift, so React reuses the wrong DOM/state for them — inputs and animations can show the wrong values.

3. Where does the key go on a mapped with a nested ?

On the — the outermost element the map returns — not on the inner .

Map a list of tasks into lines that show the key, a done marker, and the title. Run it and check your output.

Practice quiz

Which array method turns data into a list of React elements?

  • forEach
  • filter
  • map
  • reduce

Answer: map. map returns a new array with one element per item, which React renders as a list.

What is a key in a React list?

  • A stable, unique identifier on each mapped element
  • A CSS selector
  • An encryption token
  • The element's text content

Answer: A stable, unique identifier on each mapped element. A key is a stable, unique id React uses to match elements between renders.

Why does React need keys on list items?

  • For styling
  • To sort the list
  • Keys are optional and unused
  • To match elements between renders so it can update, move, or remove the right rows efficiently

Answer: To match elements between renders so it can update, move, or remove the right rows efficiently. Keys let React's diffing identify which item is which across renders, so it updates the correct rows.

What should you usually use as a key?

  • The array index
  • A stable unique id from your data
  • A random number each render
  • The element's text

Answer: A stable unique id from your data. A stable id from your data points to the same item across renders, so React tracks rows correctly.

Why is the array index a dangerous key?

  • When the list reorders, inserts, or deletes, the index shifts, so React reuses the wrong element
  • It is too long
  • It is always undefined
  • It breaks CSS

Answer: When the list reorders, inserts, or deletes, the index shifts, so React reuses the wrong element. Indexes change when the list changes, causing React to reuse the wrong DOM/state — stale inputs, broken animations.

When is using the array index as a key acceptable?

  • Always
  • Never
  • Only when the list is static and never reorders, inserts, or deletes
  • Only for objects

Answer: Only when the list is static and never reorders, inserts, or deletes. Index keys are safe only for a list that never changes order or membership.

Where exactly does the key go?

  • On any inner child element
  • On the outermost element returned by the map callback
  • On the parent <ul>
  • On the React root

Answer: On the outermost element returned by the map callback. The key belongs on the outermost element the map returns — the element being repeated — not an inner child.

If you wrap each mapped row in a Fragment that needs a key, what should you use?

  • <>...</> with a key
  • A plain <div> with no key
  • No key is possible on a fragment
  • <React.Fragment key={id}>...</React.Fragment>

Answer: <React.Fragment key={id}>...</React.Fragment>. The shorthand fragment cannot take a key, so use <React.Fragment key={id}> when a keyed fragment is needed.

What does the warning 'Each child in a list should have a unique key prop' mean?

  • Your keys are too long
  • You rendered an array of elements without keys
  • You used map incorrectly
  • Your list is empty

Answer: You rendered an array of elements without keys. React is telling you it can't track the rows reliably; add key={item.id} to the mapped element.

Do keys need to be globally unique across the whole app?

  • Yes, unique everywhere
  • They must be sequential numbers
  • No — only unique among siblings in the same list
  • They must match the DOM id

Answer: No — only unique among siblings in the same list. Keys only need to be unique among siblings in the same array, not across the entire application.