Props

By Syncfusion®, Inc. · Last updated November 6, 2026

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 title={book.title} price={book.price} />.

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.

The parent App sends title and price as props to the child BookCard

App Parent: sends props

BookCard Child: shows props

title="Atomic Habits" price={499}

Props move one way: from the parent down to the child.

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.

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.

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.

Animation: the props object is unpacked into separate title and price variables

props (one object){ title, price } { title, price } title"Atomic Habits" price499 Before: props.title and props.priceAfter: just title and price

Destructuring takes each prop out of the props object, so you can use it by its name.

// Without destructuring
function BookCard(props: { title: string; price: number }) {
  return <p>{props.title} — ₹{props.price}</p>;
}

// With destructuring
function BookCard({ title, price }: { title: string; price: number }) {
  return <p>{title} — ₹{price}</p>;
}

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.

interface BookCardProps {
  title: string;   // text
  price: number;   // number
  inStock: boolean; // true or false
}

function BookCard({ title, price, inStock }: BookCardProps) {
  return <p>{title} — ₹{price} — {inStock ? "In stock" : "Sold out"}</p>;
}

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.

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:

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.

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:

{subtitle && <p className="sub">{subtitle}</p>}

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.

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.

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.

Animation: App passes the onBuy function down to BuyButton; the click calls it, and App shows the bought book

App (parent)function onBuy(title) BuyButton (child)Buy Atomic Habits onBuy={onBuy} user clicks onBuy("Atomic Habits") Bought:Atomic Habits

The parent sends a function down. The child calls it to tell the parent that something happened.

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.

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.

Animation: the content written between the Card tags moves into the Card as the children prop Between the tags<p>20% off</p> Card title="Offer"{children} goes here children<p>20% off</p>

Whatever you put between the opening and closing tags arrives in the component as children.

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 <p>...</p> or <ul>...</ul>
• many tags together

So you can put any of these between <Card> and </Card>.

Common mistakes

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