Props: Passing Data

Props (short for "properties") are how you pass data from parent to child components.

Basic Props

// Parent passes props
<UserCard name="Alex" age={25} />

// Child receives props
function UserCard(props) {
  return <p>{props.name} is {props.age} years old</p>;
}

Destructuring Props

Cleaner syntax using destructuring:

function UserCard({ name, age }) {
  return <p>{name} is {age} years old</p>;
}

The Children Prop

The special children prop contains nested content:

<Card>
  <p>This becomes props.children</p>
</Card>

Default Values

Set defaults using destructuring:

function Button({ text = "Click me", size = "medium" }) {
  return <button className={size}>{text}</button>;
}

Important: Props are Read-Only!

Never modify props inside a component. They flow one-way: parent → child.

Experiment with props below: