Summary - List rendering

Write a storefront that sorts a product list by price and shows it.

Summary - List rendering

In this group you learned to draw arrays. Three steps: transform with map, give a unique identity with key, optionally filter with filter.

The key always sits on the outermost node and must be unique among siblings. The best key is the id field; the index only works for append-only lists.

Splitting the list into a child makes the code readable: the parent calls map, the child draws one item.

Exercise List summary task

Complete the skeleton. Write a TodoList component. The todos array has id, text and done on each item. Use filter to keep only items where !todo.done, then map them into <li key={todo.id}>{todo.text}</li>. Export it.

Show example solution

function TodoList() {
  const todos = [{ id: 1, text: "Buy milk", done: false }, { id: 2, text: "Buy bread", done: true }];
  return <ul>{todos.filter(t => !t.done).map(todo => <li key={todo.id}>{todo.text}</li>)}</ul>;
}

export default TodoList;

Test yourself

Which is wrong?
```
A random key refreshes every render.
```
- key must be unique among siblings
- Math.random() is the best key
- map returns a new array
- filter does not mutate
Show answer

Math.random() is the best key — Math.random() changes every render; it is a bad choice.
Summary - List rendering: match the terms

map

Transforms
key

Gives identity
filter

Filters
sort

Sorts

Next lesson: Project: Shopping list

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies