Rendering Lists and Keys

Feeds, tables, carts, comment threads — most of the React for Beginners interface is arrays rendered as lists. JavaScript's map() turns data into elements, but React needs one extra piece of information to do its job efficiently: a stable key for every item. This chapter covers mapping, keys, filtering, empty states, and the mistakes that cause mysterious rendering bugs.

Mapping data to elements

Call map() inside braces and React renders whatever array comes back. Each element should be a component or a tag:

const tasks = [
  { id: 1, title: 'Read the chapter' },
  { id: 2, title: 'Type the examples' },
  { id: 3, title: 'Do the checklist' },
];

function TaskList() {
  return (
    <ol>
      {tasks.map((task) => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ol>
  );
}

Expected output:

1. Read the chapter
2. Type the examples
3. Do the checklist

You can also render expressions like tasks.length alongside the list, and map to full components for richer rows.

Why React needs keys

When state changes, React reuses existing DOM nodes instead of recreating them — it matches old items to new ones. The key prop is how it identifies which is which. Without keys, React falls back to position-based matching, which quietly misbehaves once the list reorders.

If your data has no id, generate one when the item is created (crypto.randomUUID()), not while rendering.

Keys identify, they do not display

A key is invisible on screen — it is metadata for React. That surprises people who try to show a sequence number. Render the number explicitly instead of smuggling it into the key:

{items.map((item, index) => (
  <li key={item.id}>
    <span>#{index + 1}</span> {item.name}
  </li>
))}

Expected output: rows showing #1, #2, #3… where the visible number comes from index and the identity used by React comes from item.id. Keys must also be unique among siblings — duplicates in the same list trigger a console warning.

Filtering and transforming

Do heavy work before the JSX when you can; render the result. Arrays give you a clean pipeline with map, filter and reduce:

const done = tasks.filter((t) => t.done);
const labels = tasks.map((t) => t.title.toUpperCase());

// or inline when it stays readable:
<ul>
  {tasks
    .filter((t) => t.priority === 'high')
    .map((t) => <li key={t.id}>{t.title}</li>)}
</ul>

Expected output: only high-priority rows in the list; filtering out everything renders nothing at all — which is why the next section matters.

Empty states

An empty list should say so. Combine the length check with && or a ternary so users know the absence is a state, not a failure:

{tasks.length === 0
  ? <p className="empty">No tasks yet — add your first one.</p>
  : <ul>{tasks.map((t) => <li key={t.id}>{t.title}</li>)}</ul>}

Expected output: with an empty array, the friendly placeholder appears and no <ul> is created; once items exist the list takes over. This "zero, one or many" handling is a pattern you will reuse in every data view you build.

Lists of components

Rows are usually their own component, which keeps props tidy and lets each row hold its own state later:

{products.map((product) => (
  <ProductCard key={product.id} product={product} />
))}

Expected output: one card per product, each receiving its own product prop. Remember: the key goes on the element in the list — <ProductCard key={…} /> — not inside the component.

Common mistakes

• Forgetting key — React warns "Each child in a list should have a unique key" and loses track during updates.
• Using the array index as a key — edits, deletions then reorder or overwrite the wrong rows and their state.
• Picking keys that change every render — random keys remount the whole list, destroying focus and state.
• Pushing into an array instead of mapping — arr.push(<li />) mutates and returns a number; use map and render its return value.
• Duplicate keys among siblings — ids must be unique within the list you are rendering.

Practice checklist

1. Render an array of five strings as an unordered list with keys.
2. Add, remove and reorder items in dev tools and watch for warnings about keys.
3. Convert one list to index keys, delete an item mid-list, and observe the bug.
4. Display both a visible sequence number and a stable key on each row.
5. Add an empty-state message that appears exactly when the array is empty.

Lists show data — forms let users change it. Continue with Forms and Controlled Components.