Props and Component Composition

Props (short for properties) are how a parent component passes data down to a child component, they work a lot like function arguments.

function Badge({ label, color }) {
  return <span style={{ color }}>{label}</span>;
}

function Profile() {
  return (
    <div>
      <Badge label="Instructor" color="blue" />
      <Badge label="5-star" color="gold" />
    </div>
  );
}

Key rules

• Props are read-only, a component should never modify the props it receives, if it needs to change over time, that's what state (next lesson) is for.
• Destructuring props in the function signature, function Badge({ label, color }), is the idiomatic way to read them.
• The special children prop holds whatever JSX is nested between a component's opening and closing tags, letting you build flexible wrapper components like <Card>...</Card>.

Composition is the practice of building complex UIs out of small components like Badge, plugged into bigger ones like Profile.