Stop 08 · ReactTopics · 3/20

Props

In short

Props are how a parent hands data to a child. They're the reason one Card component can show a hundred different products.

The mechanism for passing data from a parent component down to a child — read-only from the child's perspective, making data flow predictable.

The jaadu mascot as a tailor holds one shirt pattern next to three shirts of different sizes.

Think of it like this

The darzi and your measurements

A darzi has one shirt pattern. Give him different measurements and he stitches different shirts. A component is the pattern and props are the measurements. He also doesn't change your measurements. He just uses them.

Watch it happen

Props travel down, read-only

Parent

Badge

Screen

props: {label, tone}

1/5The parent renders <Badge label="Rejected" tone="red">. React bundles those attributes into one props object.

The big ideas

What you need to know

Props go in like arguments

A parent writes <Card title="BBA" />, and the child receives { title } as its first argument.

Props are read-only

A child must never change its props. If something needs to change, that's state, and someone has to own it.

children is a prop too

Whatever you put between a component's opening and closing tags arrives as props.children. Perfect for wrappers like Card or Modal.

Defaults and types

Give defaults while destructuring, like size = "md", and describe the props with a TypeScript type.

See it in code

Walk through the code

tsx

1import type { ReactNode } from "react";2 3type BadgeProps = {4  label: string;5  tone?: "green" | "red";6  children?: ReactNode;7};8function Badge({ label, tone = "green", children }: BadgeProps) {9  return (10    <span className={"badge " + tone}>11      {label} {children}12    </span>13  );14}15 16// <Badge label="Rejected" tone="red">Try again</Badge>

1/4BadgeProps describes what a parent may pass. The ? makes tone and children optional.

tone is optional and falls back to green. Whatever sits between the Badge tags, like "Try again", arrives as children.

Save yourself the pain

Common mistakes

Oops

Changing a prop inside the child, like props.count++.

Do this instead

Treat props as read-only. Ask the parent to change it by calling a function it passed down, like onChange.

Oops

Passing the same prop through five layers that don't use it.

Do this instead

That's called prop drilling. Pass children instead, or use Context when many distant components need the value.

Your mission

One card, many products

~15 min

Quick check

Where does the text "Hello" arrive in <Card>Hello</Card>?

Go deeper

1Pass different data into the same component via props and observe re-renders.
2Practice destructuring props in the function signature.
3Learn `props.children` for building wrapper/layout components.