5 hands-on exercises and 5 find-the-bug challenges for the Rendering Lists lesson. Every one is checked automatically in the browser — write the code, run it, and the tests tell you what still fails.
Render one list item per name.
Render a list from objects, showing one field.
Render only the even numbers.
Render a message when the list has nothing in it.
Map to a component rather than a plain element.
forEach returns nothing, so no elements come back.
Braces after the arrow make a body, so nothing is returned.
Ready to write the code?
The editor, the automatic checks and the worked solutions open up with an account.
Open the workspaceThe predicate is inverted, so the list comes out empty.
Render a field of the object, not the object itself.
An empty list renders nothing at all; show a message.