Lesson 4 — Rendering lists

Turn arrays into elements

To show a list, map the array to JSX: each item becomes an element. React needs a key prop on each one — a value unique among its siblings — so it can tell items apart when the list changes.

const colors = ["red", "blue"];
<ul>{colors.map((c) => <li key={c}>{c}</li>)}</ul>

Why it matters: search results, chat messages and shopping carts are all arrays rendered this way.