Lesson 2 — Props

Props are a component's inputs

Props (short for properties) are values a parent passes to a component, written like HTML attributes: <Greeting name="Alex" />. The component receives them as one object, usually destructured right in the parameter list. Curly braces {…} inside JSX insert a JavaScript value into the markup.

function Price({ amount }) {
  return <span>{amount} USD</span>;
}
<Price amount={5} />  // shows: 5 USD

Why it matters: props let one component show different data — the same card for every product.