React Props for Beginners: Turning Static Components into Templates

Splitting a React interface into components is only half of reuse. A component that always renders the same text is a copy-paste unit, not a building block. Props are the mechanism that lets one component render different content each time it is used. This guide explains what props are, how data moves from parent to child, how to read props inside a component, and which kinds of values you can pass, so you can turn hard-coded components into reusable templates.

When a component can only show one thing

Once you know how to build components, a typical app tree looks something like this, with a root App rendering several sections:

App
│
├── Navbar
├── Hero
├── Features
├── Footer

Now imagine a product card for an online store. It displays a name, a price, a rating and a buy button:

-------------------------
📱 iPhone 16

₹79,999
⭐⭐⭐⭐⭐
Buy Now
-------------------------

Then the requirement arrives: show 500 products. The card as written can only show that one phone at that one price, so laptops, headphones and watches would each need a nearly identical component, which defeats the point of components. You need to keep the structure fixed while supplying different data each time. That is what props provide.

What props are

"Props" is short for properties. They are the values a parent component hands to a child component when it renders it. The component defines the structure and styling; the props supply the details that make each instance unique.

A kitchen analogy helps. A pizzeria does not invent a new recipe for every order. It has one recipe and receives different instructions per order: extra cheese, mushrooms, olives, corn. The recipe is the component, and the toppings are the props.

In other words, a component acts as a template, and props fill in the blanks. Instead of creating a separate card that always says the same thing, like this:

Product Card
iPhone

you build one generic product card and pass it different data wherever you use it.

Parents, children and one-way data flow

Props only make sense in terms of the relationship between components. Every React app is a tree in which some components render others:

App
│
├── Navbar
├── Hero
├── ProductCard
└── Footer

Here App is the parent, and Navbar, Hero, ProductCard and Footer are its children. The parent decides which children to render, and it can also give each child information. That information is its props.

React enforces one-way data flow: props travel downward, from parent to child.

App
│
│   title
│   price
│   rating
▼
ProductCard

The child receives title, price and rating, but it cannot push new values back up through its props. Props are also read-only from the child's point of view. A component should never modify the props it receives; if something needs to change over time, it belongs in state, typically owned by the parent. When a child needs to report something upward, such as a click, the parent passes it a function as a prop and the child calls it. Because data only flows in one direction, you can always trace where a value came from by walking up the tree, which makes bugs much easier to find.

Your first component with props

Start with a component that greets someone by name. It accepts a parameter called props and reads props.name inside its JSX:

function Welcome(props) {
  return (
    <h1>Hello, {props.name}</h1>
  );
}

export default Welcome;

The parent renders it and supplies the name as an attribute:

import Welcome from "./Welcome";

function App() {
  return (
    <>
      <Welcome name="Ayush" />
    </>
  );
}
export default App;

The rendered result is:

Hello, Ayush

What each piece of the syntax does

Passing a prop looks like writing an HTML attribute on the component's tag:

<Welcome name="Ayush" />

It helps to think of this as calling a function with arguments. On the receiving side, the component is a function whose first parameter is the props:

function Welcome(props)

React gathers every attribute you wrote on the tag into a single plain object and passes it as that parameter. Reading a value is ordinary property access:

props.name

Because the parent passed this attribute:

name="Ayush"

the component renders:

Hello, Ayush

The name props is only a convention. Many codebases destructure it in the parameter list, as in function Welcome({ name }).

Passing several props at once

Real components usually need more than one value. You can add as many attributes as you like. Note that strings can be written in quotes, while numbers and other JavaScript values go inside curly braces. The snippet below is missing a space between the component name and the first attribute; it should read <Welcome name=...:

<Welcomename="Ayush"
    company="OpenAI"
    experience={6}
/>

The component reads each prop by name:

function Welcome(props) {

return (
    <>
      <h2>{props.name}</h2>
      <p>{props.company}</p>
      <p>{props.experience} Years</p>
    </>
  );
}

And renders:

Ayush
OpenAI
6 Years

Change the props and the same component displays entirely different information.

A reusable product card

Back to the store. The card now reads its title, price and rating from props instead of hard-coding them:

function ProductCard(props) {
return (
    <div>
      <h2>{props.title}</h2>
      <p>₹ {props.price}</p>
      <p>{props.rating}</p>
    </div>
  );
}
export default ProductCard;

The parent can render as many cards as it needs, each with its own data. The price is passed as a number in curly braces, while the title and rating are strings:

<ProductCard
title="iPhone 16"
price={79999}
rating="⭐⭐⭐⭐⭐"
/>
<ProductCard
title="Samsung S25"
price={68999}
rating="⭐⭐⭐⭐"
/>
<ProductCard
title="MacBook Air"
price={99999}
rating="⭐⭐⭐⭐⭐"
/>

One component, three different products, no duplicated markup. For 500 products you would not write 500 tags by hand either: the data would come from an array, and you would render the cards with products.map(...), passing each item's fields as props and giving each card a unique key.

Why props make reuse possible

Without props, a store needs a separate component for every product:

ProductCard1
ProductCard2
ProductCard3
ProductCard4
ProductCard5

That means many files with nearly identical code, where a design change must be repeated everywhere. With props, the flow is one component fed with varying data:

ProductCard
↓
Different Product Data
↓
Multiple Cards

One file defines the card; instances differ only in data. This is the basic pattern behind large React apps and design systems.

Think of a standard application form: everyone fills in the same fields, such as name, age and address, with different details. The blank form is the component; the entries are the props.

What kinds of values you can pass

Props are not limited to text. Any JavaScript value can be passed. Strings can use quotes:

name="Ayush"

Numbers go in curly braces, so React receives an actual number rather than the string "26":

age={26}

Booleans also use braces:

isAdmin={true}

You can pass the value of a variable:

name={username}

Or the result of any expression, which is evaluated before the child receives it:

price={500 + 200}

Arrays, objects and functions can be passed the same way, inside braces. Functions as props are how children notify parents of events, and a special prop called children lets a component wrap whatever markup is placed between its opening and closing tags.

Hard-coded values versus props

Compare a hard-coded heading:

<h2>iPhone 16</h2>

with one driven by a prop:

<h2>{props.title}</h2>

The first can only ever show one product; the second can show any number of them. Whenever you catch yourself typing specific content into a component meant for reuse, ask whether that content should be a prop instead. Just avoid the opposite extreme: turning every tiny detail into a prop makes components harder to use, so expose what genuinely varies between uses.

For a refresher on how components themselves are structured, see React components 101.

Key takeaways

• Props, short for properties, are values a parent passes to a child when rendering it.
• Data flows one way, from parent to child, and children treat props as read-only.
• React collects all attributes on a component tag into one props object passed as the function's first argument.
• Strings can use quotes; numbers, booleans, variables and expressions go in curly braces.
• A single component plus different props replaces many near-duplicate components.
• Natural next steps are destructuring props, passing objects, arrays and callbacks, default values, and the children prop.