Props in React

Props (short for "properties") are how data flows from a parent component into a child component. They work like function arguments: a parent passes values through JSX attributes, and the child receives all of them bundled into a single object, conventionally named props.

Props always flow in one direction, from parent to child — this is called "one-way data flow" or "unidirectional data flow." A child component can read the props it receives, but it can never modify them; props are read-only from the child's perspective. If a component needs to change data over time, that data belongs in state, not in a prop the component itself owns.

Why it matters

Props are how data flows from a parent component down to a child. They make one component reusable with different content, and their one-way, read-only nature is what makes a React application predictable. Almost every bug report about "the child is not updating" comes down to how props are passed.

Passing and Reading Props

A parent passes props exactly like HTML attributes: <Greeting name="Asha" age={28} />. The child receives a single props object, { name: "Asha", age: 28 }, which it can access as props.name or, more commonly, destructure directly in the function signature as function Greeting({ name, age }).

Props Are Read-Only

React enforces that components must never mutate their own props. This "purity" rule keeps data flow predictable: given the same props, a component should always render the same output. If you find yourself wanting to reassign a prop inside a component, that is a signal the value should instead be copied into local state, or the change should be lifted up and handled by the parent that owns the data.

Default Values, children, and Prop Types

Function components can specify default values for props using default parameters, for example function Button({ label = "Click me" }). The special prop children contains whatever JSX is nested between a component's opening and closing tags, which is how wrapper components like layout containers or modals render arbitrary content passed to them. In JavaScript projects, tools like PropTypes or TypeScript interfaces are commonly used to document and validate the shape of expected props.

Example

function Card({ title, children }) {
  return (
    <section className="card">
      <h2>{title}</h2>
      <div className="card-body">{children}</div>
    </section>
  );
}

function PriceTag({ amount, currency = 'USD' }) {
  return <span>{amount.toFixed(2)} {currency}</span>;
}

export default function ProductPage() {
  return (
    <Card title="Wireless Headphones">
      <p>Noise-cancelling, 30-hour battery life.</p>
      <PriceTag amount={79.5} />
    </Card>
  );
}

Renders a card section titled "Wireless Headphones" containing the description paragraph and a price tag reading "79.50 USD" — the currency defaulted to USD because PriceTag was not given one explicitly.

Exercise

Do this in src/App.jsx of a Vite + React project. Write a Card component that takes a title prop, a tone prop that defaults to neutral, and children. It renders a section whose class is the tone, with the title in an h2 and the children beneath it. Use it twice in App.

Expected result: two cards, the first with the class neutral and the second with the class warning, each showing its own title and content.

// TODO: function Card({ title, tone = "neutral", children })

export default function App() {
  return (
    <>
      {/* TODO: a Card titled "Welcome" containing a paragraph */}
      {/* TODO: a Card titled "Heads up" with tone "warning" containing a paragraph */}
    </>
  );
}

function Card({ title, tone = "neutral", children }) {
  return (
    <section className={tone}>
      <h2>{title}</h2>
      {children}
    </section>
  );
}

export default function App() {
  return (
    <>
      <Card title="Welcome">
        <p>Pick a course to begin.</p>
      </Card>
      <Card title="Heads up" tone="warning">
        <p>Your session expires soon.</p>
      </Card>
    </>
  );
}

Quick quiz

Interview questions