React Props Explained: How to Pass Data Between Components
Learn React Props with practical examples. Understand parent-to-child communication, destructuring, children props, reusable components, and React best practices.
React Props Explained: How to Pass Data Between Components
Components are one of React's most powerful features because they allow us to build reusable user interfaces.
However, reusable components become truly useful when they can display different data.
For example, imagine an e-commerce website.
You might have multiple product cards:
- Product 1
- Product 2
- Product 3
Creating a separate component for every product would be inefficient.
Instead, React allows us to pass data into components using Props.
Props are one of the most important concepts in React and are used in almost every React application.
In this guide, you'll learn what Props are, how they work, and how professional developers use them to build reusable components.
Prerequisites
Before learning Props, make sure you understand:
These concepts form the foundation of understanding Props.
What are Props in React?
Props stands for:
Properties
Props are used to pass data from a parent component to a child component.
Think of Props as arguments passed into a JavaScript function.
Example:
function greet(name) {
return `Hello ${name}`;
}
Usage:
greet("Sachin");
Props work in a similar way.
Why Do We Need Props?
Without Props:
function ProductCard() {
return (
<h2>iPhone 16</h2>
);
}
This component always displays the same product.
With Props:
<ProductCard
name="iPhone 16"
/>
Now the component becomes reusable.
Your First Props Example
Parent Component:
function App() {
return (
<Welcome
name="Sachin"
/>
);
}
Child Component:
function Welcome(props) {
return (
<h1>
Hello {props.name}
</h1>
);
}
Output:
Hello Sachin
The parent passes data to the child through Props.
Understanding the Props Object
React collects all passed properties into an object.
Example:
<Profile
name="Sachin"
role="MERN Developer"
/>
Child Component:
function Profile(props) {
console.log(props);
return (
<h1>
{props.name}
</h1>
);
}
Props Object:
{
name: "Sachin",
role: "MERN Developer"
}
Every prop becomes a property of the Props object.
Passing Multiple Props
Example:
<UserCard
name="Sachin"
role="Developer"
experience={2}
/>
Component:
function UserCard(props) {
return (
<>
<h2>{props.name}</h2>
<p>{props.role}</p>
<p>{props.experience}</p>
</>
);
}
Multiple pieces of data can be passed easily.
Destructuring Props
Professional React developers often use destructuring.
Instead of:
function UserCard(props) {
return (
<h1>
{props.name}
</h1>
);
}
Use:
function UserCard({ name }) {
return (
<h1>
{name}
</h1>
);
}
This makes code cleaner and easier to read.
Passing Numbers
Example:
<User
age={21}
/>
Component:
function User({ age }) {
return (
<p>
Age: {age}
</p>
);
}
Use curly braces when passing JavaScript values.
Passing Boolean Values
Example:
<User
isLoggedIn={true}
/>
Component:
function User({ isLoggedIn }) {
return (
<h1>
{
isLoggedIn
? "Welcome"
: "Login First"
}
</h1>
);
}
Passing Arrays
Example:
<User
skills={[
"HTML",
"CSS",
"React"
]}
/>
Component:
function User({ skills }) {
return (
<ul>
{skills.map(skill => (
<li key={skill}>
{skill}
</li>
))}
</ul>
);
}
Props can hold arrays, objects, and other JavaScript values.
Passing Objects
Example:
<User
profile={{
name: "Sachin",
role: "Developer"
}}
/>
Component:
function User({ profile }) {
return (
<h2>
{profile.name}
</h2>
);
}
Objects are commonly passed in React applications.
Passing JSX Through Props
Props can even contain JSX.
Example:
<Card
title={
<h2>
React Props
</h2>
}
/>
React treats JSX as data.
The Children Prop
One special prop is:
children
Example:
<Card>
<h2>
React Props
</h2>
</Card>
Component:
function Card({ children }) {
return (
<div>
{children}
</div>
);
}
This makes components extremely flexible.
Real Project Usage
Blog Application
Props are used to pass:
- post title
- description
- image
- author
Example:
<PostCard
title="React Props"
author="Sachin"
/>
E-commerce Website
Props are used to pass:
- product name
- price
- image
- rating
Example:
<ProductCard
name="Laptop"
price={59999}
/>
Behind the Scenes
When React sees:
<User
name="Sachin"
/>
React internally creates:
User({
name: "Sachin"
});
This is why Props behave like function parameters.
Understanding this makes Props much easier to learn.
Props Are Read-Only
A component should never modify Props directly.
Incorrect:
props.name = "New Name";
Props are immutable.
They should only be read and displayed.
Common Beginner Mistakes
Forgetting Curly Braces
Incorrect:
<User age="20 + 1" />
Correct:
<User age={20 + 1} />
Modifying Props
Props should never be changed inside a component.
Overusing Props
Passing Props through many levels can become difficult to manage.
Later you'll learn:
- Context API
- State Management
to solve this problem.
Not Destructuring Props
Destructuring improves readability significantly.
Watch Full React Props Tutorial
If you prefer video learning, watch the complete tutorial below where we build reusable components using Props and understand how data flows between components.
Watch the Full React Props Tutorial
This tutorial demonstrates real-world examples of Props in React applications.
React vs Next.js
Props are heavily used in both React and Next.js.
In Next.js, Props are commonly used to pass data from server components to client components and between reusable UI components.
Understanding Props is essential before learning Next.js.
These concepts work closely with Props in real applications.
Build Something
Practice Props by creating:
- User Profile Card
- Product Card
- Blog Card
- Pricing Card
- Team Member Section
Focus on creating reusable components that display different data using Props.
Production Tip
Professional React developers usually:
- destructure Props
- keep components reusable
- pass only required data
- avoid deeply nested prop chains
- use TypeScript or PropTypes for validation
Well-designed Props make applications easier to maintain and scale.
Why Props Matter
Props help developers:
- reuse components
- pass data efficiently
- build dynamic interfaces
- improve maintainability
- create scalable applications
They are one of the core foundations of React development.
Conclusion
Props allow React components to receive and display dynamic data, making components reusable and flexible.
By understanding how Props work, you'll be able to build scalable user interfaces that adapt to different data without duplicating code.
Mastering Props is an essential step before learning React State and building fully interactive applications.