Lists & Keys

What this module covers

4 steps · React

1. Step 1. Lists & Keys

   Rendering lists: const items = ["Alpha", "Beta", "Gamma"]; function List() { return ( <ul> {items.map((item, i) => ( <li key={i}>{item}</li> ))} </ul> ); } Prefer stable IDs over array indexes — index keys cause bugs when items are reordered or removed. Filter + sort: const visible = users .filter(u => u.name.toLowerCase().includes(search)) .sort((a, b) => a.name.localeCompare(b.name)); CRUD patterns, always immutable: setItems(prev => [...prev, newItem]); // add setItems(prev => prev.filter(i => i.id !== id)); // remove setItems(prev => prev.map(i => i.id === id ? { ...i, ...changes } : i)); // update

   A stable id key stays attached to the correct item even if the list gets reordered or an earlier item is removed — an index key would silently attach to the wrong item instead. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the list use each user's id as the key, not the array index?

2. Step 2. Quiz: Lists & Keys

   Answer these questions about rendering lists and keys.

   Keys are React's identity system for list items; index keys break when items are reordered or removed. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Task List with CRUD

   Build a task list with add, delete, and toggle-complete functionality. Show a count of remaining tasks.

   All three operations — add, remove, toggle — follow the same immutable-update rule from this lesson's concepts: never mutate tasks directly, always produce a new array. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the list support add, remove, and toggle, all via immutable updates?

4. Step 4. Mini project: Lists & Keys

   Build a task list with add, delete, and toggle-complete functionality. Show a count of remaining tasks. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   All three operations — add, remove, toggle — follow the same immutable-update rule from this lesson's concepts: never mutate tasks directly, always produce a new array. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the list support add, remove, and toggle, all via immutable updates?