Rendering lists and keys

Map an array to elements to render a list, and give each one a stable key so React can match items across renders. The key tells React which item moved, appeared or disappeared.

What a session covers

The tutor works through these with you, in conversation and code. A session ends when you have shown them, not when a video does.

Explain what a key tells React when a list changes
Render a list from an array with stable keys
Spot the index key that makes inputs jump when items reorder

In practice

A few lines that show Rendering lists and keys doing its job.

TSX

function TodoList({ todos }: { todos: { id: string; text: string }[] }) {
  return (
    <ul>
      {todos.map((todo) => (
        <li key={todo.id}>{todo.text}</li>
      ))}
    </ul>
  );
}

The common mistake

Watch for

Using the array index as the key for a list that can reorder or delete. React then reuses the wrong DOM nodes and state, so a checkbox or input appears to jump to a different item.

What to know first

Your roadmap puts these before Rendering lists and keys, unless you already know them.

Function components

How it stays learned

Once a session shows you understand Rendering lists and keys, it comes back for review. Each review takes a minute and tells the memory model how well you still know it.

Day 3First recall, while it is fresh
Day 7Second, a week on
Day 18Last, when it has settled

Previous in the module← Function components