How props work in React components

Props: Passing Data to Components

Props (properties) are how you pass data from a parent component to a child. They work like function arguments — the parent sends values, the child receives and uses them.

Passing and Receiving Props

// Parent sends props
function App() {
  return <Button label="Submit" disabled={false} count={3} />;
}

// Child receives as object — destructure for clarity
function Button({ label, disabled, count }) {
  return (
    <button disabled={disabled}>
      {label} ({count})
    </button>
  );
}

Default Props

function Button({ label = 'Click', disabled = false }) {
  return <button disabled={disabled}>{label}</button>;
}

The children Prop

Anything between a component's opening and closing tags becomes props.children:

function Card({ children }) {
  return <div className="card">{children}</div>;
}

// Usage
<Card>
  <h2>Title</h2>
  <p>Content here</p>
</Card>

Props Are Read-Only

Never mutate props inside a child component. If a child needs to change data, the parent must own the state and pass a callback. This one-way data flow makes React apps predictable and easier to debug.