Props

A component can be used like a tag, as many times as you want. What changes from one use to the next are its props: the attributes you write on the tag. Quotes give a string, and curly braces give any JavaScript value, like a number.

React gathers a tag's props into one object and passes it to the function. Curly braces in the parameter list, like { label }, take a prop out of that object by name. Here is a small component used twice:

function Badge({ label }) {
  return <span>{label}</span>;
}

<Badge label="New" />
<Badge label="Sale" />

One function, two badges: React calls Badge once for each tag, the first time with label set to "New", the second time with "Sale".

The given src/App.jsx draws three cards: <ProductCard name="Mug" price={12} />, then Lamp at 29 and Plant at 15. Under the header from the last lesson, the check must print:

      article
        heading 3: Mug
        text: $12
      article
        heading 3: Lamp
        text: $29
      article
        heading 3: Plant
        text: $15

Your task: in src/ProductCard.jsx, the function already takes { name, price } and returns an empty article. Inside it, show the name in a heading 3 and, under it, a paragraph with a dollar sign and the price.

Assignment
Follow the Coding Tutorial to write one ProductCard that shows whatever product it is given.

Hint
Text outside curly braces is shown as it is, so a dollar sign typed before the braces appears on the page.