React Props

React Props: Passing Data Down the Component Tree

React props (short for properties) are arguments passed into a component just like attributes on an HTML element. Props let you configure one reusable component with different titles, badges, click handlers, or nested children markup without duplicating code.

Unidirectional Data Flow and Immutability

Data in React flows strictly one way: from parent component down to child component. A child component must treat props as read-only and never reassign them. When a child needs to trigger an action, the parent passes a callback function prop such as onSelect.

flowchart TD
    Parent["Parent Component (Owns State)"] -->|"passes props (user, onFollow)"| Child["Child Component (Read-Only)"]
    Child -->|"calls onFollow(user.id)"| Parent

Destructuring Props, Defaults, and Children

Destructuring props inside the function parameter list keeps code clean and lets you assign default values directly. The special children prop captures any JSX placed between a component's opening and closing tags.

function Card({ title, tone = 'neutral', children, onAction }) {
  return (
    <section className={`card card-${tone}`}>
      <h3>{title}</h3>
      <div className="card-body">{children}</div>
      {onAction && (
        <button type="button" onClick={onAction}>
          Continue
        </button>
      )}
    </section>
  );
}

export default function Dashboard() {
  return (
    <Card title="Billing Alert" tone="warning" onAction={() => alert('Opening billing')}>
      <p>Your trial ends in 3 days.</p>
    </Card>
  );
}

Common Props Mistakes

• Mutating Props Inside a Child: Writing props.items.push(newItem) corrupts parent data and creates hard-to-trace rendering bugs. Derive a new value or copy into local state instead.
• Excessive Prop Drilling: Passing the same prop through five intermediate components that do not use it clutters interfaces. Use component composition (children) or useContext for deeply shared values.

Frequently Asked Questions

What is the difference between props and state?

Props are external inputs passed from a parent and stay read-only inside the child. State is internal data owned and updated by the component itself.

Can I pass functions and JSX elements as props?

Yes. Any JavaScript value—strings, numbers, arrays, objects, functions, or JSX—can be passed as a prop.

How does React 19 handle the ref prop?

In React 19, function components can accept ref directly as a standard prop without wrapping the component in React.forwardRef.