Lesson 1 of 8
Rendering arrays on the page
- 12 min
- 4 checks
- 3 hints
- Go to task
Goal
Turn data into elements on the page
01
Explanation
Real interfaces aren't written by hand one element at a time: they're built from data. An array is a list of values, and the map method turns each value in it into something else.
So ['a','b'].map(x => '<li>' + x + '</li>') gives you an array of tags, and join('') combines them into a single string that you put in innerHTML.
Always keep this rule in mind: the data comes first, and the interface follows from it. Change the array and the page changes with it.
02
Your task
Show each item of fruits in its own <li> element inside the list.
Checks
4 checks- The list has four li elements
- The first item is "Apple"
- The last item is "Fig"
- The items are in the same order as the array