Map an array to elements — practice exercise

What you'll be asked to do

1. 1.Map an array to elementsexercise · easy · 10 min

   Render one list item per name.

   Passes when: #root li should show 3 items.

2. 2.Map objectsexercise · easy · 10 min · practice plan

   Render a list from objects, showing one field.

   Passes when: #root should show Ada.

3. 3.Filter before mappingexercise · easy · 10 min · practice plan

   Render only the even numbers.

   Passes when: #root li should show 2 items.

4. 4.Show an empty stateexercise · easy · 10 min · practice plan

   Render a message when the list has nothing in it.

   Passes when: #value should show Nothing here.

5. 5.Render a list of componentsexercise · medium · 10 min · practice plan

   Map to a component rather than a plain element.

   Passes when: #root .row should show 2 rows.

6. 6.Fix forEach used instead of mapbug fix · easy · 8 min

   forEach returns nothing, so no elements come back.

   Passes when: The list should hold three items.

7. 7.Fix the map with no returnbug fix · easy · 8 min · practice plan

   Braces after the arrow make a body, so nothing is returned.

   Passes when: The list should hold two items.

8. 8.Fix the filter that keeps nothingbug fix · easy · 8 min · practice plan

   The predicate is inverted, so the list comes out empty.

   Passes when: Only the even numbers should be listed.

9. 9.Fix the object rendered directlybug fix · easy · 8 min · practice plan

   Render a field of the object, not the object itself.

   Passes when: The item should show Ada.

10. 10.Fix the missing empty statebug fix · medium · 8 min · practice plan

    An empty list renders nothing at all; show a message.

    Passes when: #root should show Nothing here.

Between them these tasks cover map, filter and Empty states.

Looking for a different chapter? See every practice set, or switch to the interview theory questions.