react · source-driven

Rendering lists

Transform arrays with map(). Give each sibling a stable key — usually a database id.

Official docs: react.dev/learn — Rendering lists

You will learn

How to use array.map to produce a list of elements
Why each list item needs a key
That keys should come from your data, not the array index (when identity matters)

map() turns data into elements

const listItems = products.map(product =>
  <li key={product.id}>
    {product.title}
  </li>
);

return <ul>{listItems}</ul>;

From the docs: for each item, pass a string or number that uniquely identifies that item among its siblings. React uses keys to know what changed when you insert, delete, or reorder.

Try it

Cabbage
Garlic
Apple

Recap

Use map to render lists
Pass key on the outermost element in the map
Keys identify identity across updates

Challenge

Try this

Filter the list to fruits only with products.filter(p => p.isFruit).map(...) — chaining like you would in a Nest service query pipeline.