Skip to main content
PProfileMatch
← Path

React · React Lists, Keys and Conditional Rendering

0 XP
  1. 1 current stop: learning
  2. 2 upcoming
  3. 3 upcoming
  4. 4 upcoming
  5. 5 upcoming

Finish after stop 5

Stop 1 of 5 · Conference hall: name-badge desk

Trick to keep in mind+3 XP

A key is a name badge: it lets React recognise the same person after a reshuffle.

When a list re-renders, React needs to know which new item corresponds to which old one, so it can keep each item's DOM node and state attached to the right data. A key supplies that identity. The badge analogy fails in one way: a key only needs to be unique among siblings, and it is for React alone, so the child never receives it as a prop.

Read it once, then a question tests whether the trick stuck.