Rendering lists with map

lesson 5-1 · ~10 min · 13/28

Quiz

Warm-up from lesson 4-3: to change one task inside an array in state, you used tasks.map(...). What does map always return?

Rendering lists with map

Real apps render arrays: tasks, messages, products. JSX has no loop syntax, and it does not need one. Curly braces accept an array of elements, and map produces exactly that:

function TaskList({ tasks }) {
  return (
    <ul>
      {tasks.map(task => (
        <li key={task.id}>{task.title}</li>
      ))}
    </ul>
  );
}

For tasks = [{id: 1, title: "Water plants"}, {id: 2, title: "Pay rent"}], the map produces an array of two <li> elements and React renders them in order. The key attribute is required on list items, next lesson explains why.

Data in, elements out. Since it is plain JavaScript, you can chain anything before the map: filter to hide items, slice to cap the count, sort (on a copy) to order them.

Code exercise · javascript

The same list logic without JSX: map tasks to <li> strings and join them. Run it. Notice the done task gets a check mark from a ternary, the same expression you would embed in JSX.

Code exercise · javascript

Your turn. Build rows: keep only scores with points >= 70 using filter, then map each to "<li>NAME: POINTS</li>". The console.log wraps them in <ol>.

Quiz

Predict the render: ```jsx const nums = [1, 2, 3]; return <div>{nums.map(n => <b key={n}>{n * 10}</b>)}</div>; ```