# Props
Course: [React](https://www.devtutorials.ai/learn/react) · Section: Data Flow in React
Source: https://www.devtutorials.ai/learn/react/data-flow/props
> What props are, passing one or many props, destructuring, typing props with an interface, optional and default props, and passing objects, functions and children as props.
## Introduction to Props
**Props** are values that you send into a component. The word props is short for **properties**.
Props let you use one component many times, with different data each time. A parent component sends props. A child component receives them.
### Real-World Example
A bookshop's `BookList` component gets 20 books from the server. It passes the data of each book to a `BookCard`: ``.
`BookCard` does not know where the data comes from. It only displays the props it receives, so the same card also works on the search page and the wishlist page.
Props move one way: from the parent down to the child.
Props go from parent to child. A child can read its props, but it must not change them.
## Passing Data with Props
To send a prop, write it like an HTML attribute on the component tag. To read it, the child takes a `props` object as its input.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The same `Greeting` component shows two different names. `name="Asha"` sends the text "Asha". Inside the child, `props.name` reads it.
Text values go in quotes. All other values go in curly braces: numbers `{499}`, true or false `{true}`, and variables `{bookTitle}`.
## Using Multiple Props
A component can receive many props. Write them one after another on the tag, in any order.
{props.title}
by {props.author}
₹{props.price}
);
}
return (
);
}
`,
"App.css": `.card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 12px; margin-bottom: 8px; }
.card h3 { margin: 8px 0 4px; }
.card p { margin: 4px 0; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
React puts all the props into one object. For the first card, the object is `{ title: "The Alchemist", author: "Paulo Coelho", price: 299 }`.
## Props Destructuring
React puts all the props in one object, called `props`. To read a prop, you write `props.title` or `props.price`.
**Destructuring** is a shorter way. You write the prop names inside `{ }` in the function's brackets. Then you can use each prop by its name, without `props.` in front.
Destructuring takes each prop out of the props object, so you can use it by its name.
```tsx
// Without destructuring
function BookCard(props: { title: string; price: number }) {
return
{props.title} — ₹{props.price}
;
}
// With destructuring
function BookCard({ title, price }: { title: string; price: number }) {
return
{title} — ₹{price}
;
}
```
Both components show the same thing. Look at the difference:
- **Without destructuring**, the function gets one object called `props`. You read `props.title`.
- **With destructuring**, `{ title, price }` takes `title` and `price` out of the object. You read just `title`.
Most React code uses the second way, because it is shorter.
## Defining and Typing Props
In TypeScript, you write down which props a component needs and what kind of value each one is. TypeScript then warns you if a prop is missing or has the wrong kind of value.
### Typing Props Using an Interface
An **interface** is a named list of props and their types. You write it once, above the component.
```tsx
interface BookCardProps {
title: string; // text
price: number; // number
inStock: boolean; // true or false
}
function BookCard({ title, price, inStock }: BookCardProps) {
return
;
}
```
You can also use `type BookCardProps = { ... }`. For props, both work the same way. This course uses `interface` for props from now on.
### Optional Props
Some props are not always needed. Put a `?` after the name to make a prop **optional**. The parent can then leave it out.
```tsx
interface BookCardProps {
title: string;
subtitle?: string; // optional
}
```
If the parent does not send an optional prop, its value is `undefined`.
### Default Props
A **default value** is the value a prop gets when the parent does not send it.
You set it in the function's brackets, with `=`. In the code below, look at this part of `BookCard.tsx`:
```tsx
function BookCard({ title, price, subtitle, inStock = true }: BookCardProps)
```
`inStock = true` means: if the parent does not send `inStock`, use `true`. If the parent sends `inStock={false}`, use `false`.
{title}
{subtitle &&
{subtitle}
}
₹{price} · {inStock ? "In stock" : "Sold out"}
);
}
`,
"App.tsx": `import BookCard from "./BookCard";
return (
);
}
`,
"App.css": `.card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 12px; margin-bottom: 8px; }
.card h3 { margin: 8px 0 4px; }
.card p { margin: 4px 0; }
.sub { color: #64748b; font-style: italic; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Look at the three cards:
- **Atomic Habits** has a subtitle, because the parent sent one.
- **Wings of Fire** shows "Sold out", because the parent sent `inStock={false}`.
- **The Alchemist** has no subtitle and shows "In stock". The parent sent neither prop, so the default `true` was used.
Look at this line in `BookCard.tsx`:
```tsx
{subtitle &&
{subtitle}
}
```
It means: **if** `subtitle` has a value, show the paragraph. If the parent did not send a subtitle, nothing is shown. That is why only "Atomic Habits" has a subtitle line.
`?` means "this prop can be left out". `= value` means "use this value when it is left out".
## Passing Objects as Props
A prop can hold a whole object. This is useful when the data already comes as one object, such as a book from a list.
{book.title}
by {book.author} · ₹{book.price}
);
}
`,
"App.tsx": `import BookCard, { type Book } from "./BookCard";
const featured: Book = {
title: "Wings of Fire",
author: "A. P. J. Abdul Kalam",
price: 350,
};
return (
Book of the week
);
}
`,
"App.css": `.card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 12px; }
.card h3 { margin: 8px 0 4px; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The parent sends one prop, `book`. The child reads its parts with `book.title`, `book.author` and `book.price`.
The `Book` interface is exported, so `App` can use the same type for its data.
## Passing Functions as Props
A prop can also be a **function**. The parent sends a function, and the child calls it. This is how a child tells its parent that something happened, such as a button click.
The parent sends a function down. The child calls it to tell the parent that something happened.
);
}
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
Press a button and look at the console. Here is what happens:
1. `App` sends its function `handleBuy` to the child as the prop `onBuy`.
2. You click the button inside `BuyButton`.
3. `BuyButton` calls `onBuy(title)`.
4. `handleBuy` runs inside `App` and prints the message.
Function props usually start with `on`, such as `onBuy`, `onClick` or `onSave`.
Pass the function itself: `onBuy={handleBuy}`. Do not write `onBuy={handleBuy()}`. The brackets would run the function at once, before any click.
## Children Props
**children** is a special prop. It holds whatever you put **between** the opening and closing tags of a component.
This lets you make wrapper components, such as a card or a box, that can hold any content.
Whatever you put between the opening and closing tags arrives in the component as children.
{title}
{children}
);
}
`,
"App.tsx": `import Card from "./Card";
return (
Every day, 9 am to 9 pm.
Atomic Habits
Wings of Fire
);
}
`,
"App.css": `.card { border: 1px solid #cbd5e1; border-radius: 8px; padding: 2px 12px; margin-bottom: 8px; }
.card h3 { margin: 8px 0 4px; color: #0047ba; }
`,
"main.tsx": `import { createRoot } from "react-dom/client";
createRoot(document.getElementById("root")!).render();
`,
}}
/>
The first card holds a paragraph. The second card holds a list. `Card` does not know what is inside. It just puts `{children}` in its body.
In the interface, `children` has the type `ReactNode`. This type allows any content that React can show on the screen. For example:
- text, like `Hello`
- a number, like `42`
- a tag, like `
...
` or `
...
`
- many tags together
So you can put any of these between `` and ``.
## Common mistakes
| Mistake | What you see | Fix |
|---|---|---|
| Sending a number in quotes: `price="499"` | The price is text, and maths on it gives wrong results | Use braces: `price={499}` |
| Changing a prop inside the child: `price = 100` | TypeScript error, or the change is lost | Treat props as read-only |
| Forgetting the braces when destructuring: `function Card(title)` | `title` is the whole props object, not the text | Write `function Card({ title })` |
| Missing a required prop | TypeScript warns that the prop is missing | Send the prop, or add `?` to make it optional |
| Calling the function when passing it: `onBuy={handleBuy()}` | It runs at once, before any click | Pass the function: `onBuy={handleBuy}` |
| Not showing `{children}` inside the wrapper | The content between the tags does not appear | Add `{children}` where it should show |
| Spelling a prop differently in parent and child | The value is `undefined` in the child | Use the same name in both places |
## Check Yourself
## Exercises
## What to Remember
- Props send data from a parent to a child. The child reads props but does not change them.
- Describe props with an interface. Use `?` for optional props and `= value` for defaults.
- Props can be text, numbers, objects, functions, or `children`.
Next: State