Guided Notes

Lists & Keys

Rendering arrays with map, choosing keys, filtering, and updating lists in state.

Rendering a list with map

Slide 1 / 5

To show an array, turn each item into an element with map. React renders arrays of elements in order:

const fruits = ["Apple", "Banana", "Cherry"];

function FruitList() { return ( <ul> {fruits.map((fruit) => ( <li key={fruit}>{fruit}</li> ))} </ul> ); }

For longer items, map to a component:

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