Lists and Keys in JavaScript

The shop has 8 products, and you don't want to write 8 tags by hand. A JavaScript array has map: it calls a function once per item and gives back a new array with what the function returned. In JSX, an array of tags inside curly braces is drawn one after the other.

Here is the idea on another list, the days a market is open:

const days = ["Mon", "Tue", "Wed"];

function DayList() {
  return (
    <ul>
      {days.map((day) => {
        return <li key={day}>{day}</li>;
      })}
    </ul>
  );
}

A function with braces { } must say return: without it, map gives back undefined for every item, and React draws nothing. Each item also needs a key: a value that is different for every item and doesn't change, so React can tell the items apart. For products, that's product.id. Without a key, the cards still appear, but the check prints React's warning about the missing key.

App (read-only) passes all 8 products to ProductList. When you press Check, the page must show:

list
  item
    article
      heading 3: Mug
      text: $12
  item
    article
      heading 3: Notebook
      text: $7
      text: Out of stock
  … one item per product, down to
  item
    article
      heading 3: Gift card
      text: $50

Your task: in src/ProductList.jsx, inside the ul, map the products to li items, each holding a ProductCard for its product and keyed by product.id.

Assignment
Follow the Coding Tutorial to turn the array of products into a list of cards with map, one li per product, each with its key.

Hint
The key goes on the li, the tag your function returns, not on anything inside the card. Until the function returns something, the list stays empty.