cf.completefrontend

Write the codeEasy

Render a product list with keys, a Sold out badge, and an empty message

Write ProductList. It takes products, an array of objects like { id: 1, name: "Green tea", price: 4, stock: 3 }, and renders a <ul> with one <li> per product, in the order given.

Each item shows the name and the price with two decimals, like Green tea: $4.00. A product whose stock is 0 also shows a Sold out badge in its item. When there are no products, render only a paragraph, No products yet., and no list.

Give each item a key, so React keeps each product's row when the list changes order, and so it doesn't warn.

Write this (ProductList.jsx)
export default function ProductList({ products }) {
  return (
    <ul>
      {products.map((product) => (
        <li>
          {product.name}: ${product.price}
        </li>
      ))}
    </ul>
  );
}
The checks your code must pass
  • shows each product with its price
  • marks only sold-out products
  • shows only a message when there are no products
  • doesn't warn about keys
  • keeps each product's row when the order changes

Try it in the editor

The answer

Write it yourself first. Then compare it with a reference solution and the checks it passes.

Checking your sign-in…