Props — Passing Data to Components

9 min read

Props Are Read-Only

Props (short for properties) are the inputs to a component, passed as JSX attributes from parent to child. A component must never mutate its own props — they flow one way, from parent down.

jsx

// Default props with destructuring defaults
function Badge({ label, color = "blue", size = "md" }) {
  return (
    <span className={`badge badge-${color} badge-${size}`}>
      {label}
    </span>
  );
}

// Usage
<Badge label="New" />
<Badge label="Sale" color="red" size="lg" />

Spreading props

You can forward all props to a child element using the spread operator. This is common for wrapper components, but use it carefully — forwarding unknown props to DOM elements causes console warnings.

jsx

function PrimaryButton({ children, ...rest }) {
  return (
    <button className="btn btn-primary" {...rest}>
      {children}
    </button>
  );
}

TypeScript users: define a Props interface or use React.ComponentPropsWithoutRef<'button'> to get full prop types from native elements.

Ready to test yourself?

Practice React— quiz & coding exercises