Pass a Whole Product in JavaScript

In the last lesson, App gave each card two props, name and price. A product has more fields than that, like its stock. Instead of passing them one by one, App can pass the whole object in one prop: <ProductCard product={PRODUCTS[1]} />. Inside the card, a dot reads one field: product.name, product.price.

Sometimes a line should show only in some cases. In JSX you write {test && <p>…</p>}: when the test is true, you get the paragraph; when it is false, React draws nothing. For example, a badge for a shop:

function ShopBadge({ shop }) {
  return (
    <div>
      <h2>{shop.name}</h2>
      {shop.closed && <p>Closed today</p>}
    </div>
  );
}

When the test is about a number, make it a real comparison, like shop.visitors === 0. A bare number is a trap: {count && …} with a count of 0 draws a 0 on the page.

App (read-only) already passes the first three products of data.js. The Notebook has a stock of 0 and the Lamp a stock of 1. When you press Check, the cards must show:

article
  heading 3: Mug
  text: $12
article
  heading 3: Notebook
  text: $7
  text: Out of stock
article
  heading 3: Lamp
  text: $29
  text: Last one

Your task: in src/ProductCard.jsx, fill the article: the name in an h3, the price after a $, a paragraph "Out of stock" when the stock is 0 and a paragraph "Last one" when it is 1.

Assignment
Follow the Coding Tutorial to fill ProductCard from its one product prop, with two lines that show only for some products.

Hint
Text outside curly braces is drawn as it is, so the $ goes just before the braces. Compare the stock with === 0 and === 1, never the bare number.