Module 1 · Components and JSX Lesson 3 of 15

Lists, keys and conditional rendering

Worked example

items.map((it) => <Row key={it.id} item={it} />) is correct. key={index} looks identical on screen and produces the wrong row updating once you sort or delete — exactly the defect you do not want to explain in an interview.

Your practice task

Render a list of twenty items, add a delete button on each row, and fix the keys so deleting the second row deletes the second row.

Do this before moving on. Reading a solution teaches the shape of it; typing it teaches you.

Key takeaway

Rendering a list means mapping an array to components, and React needs a stable key to know which row changed. An index as a key is the classic bug that only shows up when the list reorders.

Almost there

15 lessons left of 15

Finish every lesson to unlock the certificate. Each one ends in a practice task — do them and the final project brief writes itself.

Next recommended course Full-Stack Web Development Bootcamp