Passing Props

Props are inputs

Parents pass props as attributes. Children read them from the function argument.

function Greeting({ name }) {
  return <p>Hello, {name}!</p>;
}

function App() {
  return <Greeting name="Sam" />;
}

Pass any JavaScript value

Strings, numbers, booleans, objects, arrays, and functions can all be props.

<Score value={42} active={true} />
<UserCard user={{ name: "Mina", role: "learner" }} />

Props are read-only

A child should not assign to props. To change data, lift state to a parent or use a callback prop.

Default values

Destructure with defaults when a prop is optional.

function Button({ label = "Save" }) {
  return <button type="button">{label}</button>;
}