Lesson 3 of 3 · 9 min

Rendering lists

map turns arrays into UI: items.map(item => <li key={item.id}>{item.name}</li>).

Keys help React track which items changed, moved or were removed.

Practice

Render an array of three hobbies as a list, giving each a stable key.

Optional resources

No purchase or partner signup is required to complete this course or earn quiz points.

These are official product links, not active affiliate links. Learnly does not currently earn a commission from them.

Follow the official component and state tutorials.

Free documentation.

Prototype React components in the browser.

Free tier available; paid plans optional.