Current section: Implementation 12 exercises

Use a Loop to Quickly Create a List

The spread operator and the Array.keys() method can be utilized to create a list of items.

In order to create our list of four cards inside of the <ul>, we'll start by using the spread operator with Array.keys(). This will give us an array of 0, 1, 2, and 3:

<div class="grid min-h-scr

Loading lesson


00:00 So I just want a loop of four items, and I'll create that with spread_array of four items, and then I will get the keys that will basically create an array of 0, 1, 2, and 3.

00:14 And so these are four items that I can dot map over, and then for each item I can output one of these li items. So I should be able to delete the other three and still have the exact same result. So now we're going to write the code once, and then the card is going to be replicated four times.