Lists in React

A list in React is an array turned into elements with map. items.map(it => <li key={it.id}>{it.name}</li>). You almost never write a for-loop inside JSX — for is a statement, JSX wants an expression. You can still use a normal for above the return: build an array of elements, then {rows} in JSX.

Each item needs a key (see the Keys topic). Extract <Row /> when the item UI grows past a line or two. Don’t use map to mutate the original array — map returns a new array, which is what we want. filter then map is the usual pair: show only in-stock products, then draw cards.

Let’s take a tiny shop on the board. const items = [{ id: 'a1', name: 'Pen' }, { id: 'a2', name: 'Ink' }]; return <ul>{items.map(it => <li key={it.id}>{it.name}</li>)}</ul>; Screen: Pen, Ink. Delete Pen from the array, Ink stays Ink — because the key was a2, not index 1 that became 0.

Empty list: don’t render a blank ul with no message. {items.length === 0 ? <p>No items</p> : <ul>…</ul>}. Loading: show a spinner until the array arrives. Those two branches are part of ‘lists’ in real apps, not extra topics.

Trap: forEach inside JSX (returns undefined, nothing draws). Trap: missing key warning you ignore. Trap: using the object itself as key. Trap: mapping a huge list without virtualisation in a later performance round — mention windowing only if they ask.

Lists in React — on screen — Pen, Ink. Each li has a stable id key.