Props

beginner2 min read

React
TypeScript

The inputs a parent component passes down to a child, making components configurable and reusable, and always flowing one way down the tree.

Prerequisites

React components (see Related Topics)

What you'll understand

What props are and how they make components reusable
How data flows from parent to child
Why props are read-only

Explanation

Props (short for properties) are the inputs to a component. A parent passes values down to a child through attributes, and the child receives them as its argument. Props are what make a component reusable: the same Button component can render differently depending on the label and style passed to it.

Props establish React one-way data flow: data always moves down the tree, from parent to child, never back up. A parent decides what values its children receive, and a child cannot reach up and change its parent. This single direction makes an application predictable, because you can always trace where a piece of data came from.

A crucial rule is that props are read-only. A component must never modify the props it receives; it treats them as fixed inputs for that render. If a child needs to affect its parent, the parent passes down a function prop the child can call (an event handler), keeping data flowing down and changes requested upward through callbacks. Data that changes over time within a component is state, a separate concept (see Related Topics).

Examples

A parent passes a prop; the child reads it from its props argument:

function Greeting({ name }: { name: string }) {
  return <h1>Hello, {name}!</h1>;
}

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

To let a child request a change, the parent passes a function prop the child calls:

function SaveButton({ onSave }: { onSave: () => void }) {
  return <button onClick={onSave}>Save</button>;
}

Common mistakes

Mutating a prop inside the child instead of treating it as read-only.
Trying to send data upward by changing props rather than calling a passed-in function.
Passing so many props that a component becomes hard to use; consider composition.
Confusing props (inputs from the parent) with state (data the component owns).

Best practices

Treat props as read-only inputs and never mutate them.
Pass function props (callbacks) to let children request changes.
Type your props so misuse is caught at compile time.
Keep the prop list small and meaningful; lean on composition for the rest (see Related Topics).