When I first started working with React more than a decade ago, one of the concepts that immediately stood out to me was props.
I’ve used props in countless projects, from dashboards for U.S. retail companies to internal HR tools. And every single time, props helped me keep my components reusable and my code clean.
In this tutorial, I’ll walk you through everything you need to know about how to pass props to a component in React. I’ll also share multiple methods, complete code examples, and simple explanations so you can follow along easily.
What Are Props in React?
Props (short for properties) are a way to pass data from a parent component to a child component.
Think of props as arguments you pass into a function. The parent provides the data, and the child receives it. The best part? Props can be anything: strings, numbers, arrays, objects, or even functions.
Method 1 – Pass String Props
Let’s start with the simplest example: passing a string.
// App.js
import React from "react";
import Greeting from "./Greeting";
function App() {
return (
<div>
<Greeting name="John" />
</div>
);
}
export default App;
// Greeting.js
import React from "react";
function Greeting(props) {
return <h1>Hello, {props.name}! Welcome to our site.</h1>;
}
export default Greeting;I executed the above example code and added the screenshot below.
Here, I passed “John” as a string prop to the Greeting component. Inside Greeting, I accessed it using props.name. This is the most basic and common way you’ll use props in React.
Method 2 – Pass Number Props
Props don’t have to be strings. You can pass numbers directly as well.
// App.js
import React from "react";
import AgeDisplay from "./AgeDisplay";
function App() {
return (
<div>
<AgeDisplay age={30} />
</div>
);
}
export default App;
// AgeDisplay.js
import React from "react";
function AgeDisplay(props) {
return <p>You are {props.age} years old.</p>;
}
export default AgeDisplay;I executed the above example code and added the screenshot below.
Notice that I didn’t use quotes around 30 because it’s a number. React automatically treats it as a numeric value. This is useful for calculations, pricing, or any numeric data.
Method 3 – Pass Object Props
Sometimes, you’ll want to pass multiple related values together. That’s where objects come in handy.
// App.js
import React from "react";
import UserProfile from "./UserProfile";
function App() {
const user = {
name: "Emily",
city: "New York",
country: "USA"
};
return (
<div>
<UserProfile user={user} />
</div>
);
}
export default App;
// UserProfile.js
import React from "react";
function UserProfile(props) {
return (
<div>
<h2>{props.user.name}</h2>
<p>Location: {props.user.city}, {props.user.country}</p>
</div>
);
}
export default UserProfile;I executed the above example code and added the screenshot below.
I passed the entire user object as a prop. Inside UserProfile, I accessed its properties using props.user.name, props.user.city, etc. This method keeps your code cleaner when dealing with structured data.
Method 4 – Pass Array Props
Arrays are great when you need to display lists, like product names or cities.
// App.js
import React from "react";
import CityList from "./CityList";
function App() {
const cities = ["New York", "Chicago", "Los Angeles", "Houston"];
return (
<div>
<CityList cities={cities} />
</div>
);
}
export default App;
// CityList.js
import React from "react";
function CityList(props) {
return (
<ul>
{props.cities.map((city, index) => (
<li key={index}>{city}</li>
))}
</ul>
);
}
export default CityList;I executed the above example code and added the screenshot below.
I passed an array of cities as a prop. Inside CityList, I used map() to render each city dynamically. This is especially useful for rendering lists of items in React apps.
Method 5 – Pass Function Props
One of the most powerful features of props is passing functions. This allows child components to communicate back to parents.
// App.js
import React from "react";
import Button from "./Button";
function App() {
const handleClick = () => {
alert("Button clicked!");
};
return (
<div>
<Button onClick={handleClick} />
</div>
);
}
export default App;
// Button.js
import React from "react";
function Button(props) {
return <button onClick={props.onClick}>Click Me</button>;
}
export default Button;I executed the above example code and added the screenshot below.
I passed handleClick as a prop. The child component (Button) executed it when the button was clicked. This is the foundation of event handling in React.
Method 6 – Destructuring Props
While using props.something works, it can get repetitive. That’s why I often use destructuring.
// App.js
import React from "react";
import Product from "./Product";
function App() {
return (
<div>
<Product name="Laptop" price={1200} />
</div>
);
}
export default App;
// Product.js
import React from "react";
function Product({ name, price }) {
return (
<div>
<h2>{name}</h2>
<p>Price: ${price}</p>
</div>
);
}
export default Product;Instead of writing props.name and props.price, I destructured them directly in the function parameter. This makes the code cleaner and easier to read.
Method 7 – Default Props
Sometimes, you may want to set default values for props in case they’re not provided.
// App.js
import React from "react";
import Welcome from "./Welcome";
function App() {
return (
<div>
<Welcome />
<Welcome name="David" />
</div>
);
}
export default App;
// Welcome.js
import React from "react";
function Welcome({ name }) {
return <h1>Welcome, {name}!</h1>;
}
Welcome.defaultProps = {
name: "Guest"
};
export default Welcome;The first Welcome renders with the default value “Guest”. The second Welcome overrides it with “David”. This ensures your components always have fallback values.
Method 8 – Prop Types Validation
For larger apps, it’s good practice to validate props using prop-types.
// App.js
import React from "react";
import Score from "./Score";
function App() {
return (
<div>
<Score points={95} />
</div>
);
}
export default App;
// Score.js
import React from "react";
import PropTypes from "prop-types";
function Score({ points }) {
return <p>Your score is {points}</p>;
}
Score.propTypes = {
points: PropTypes.number.isRequired
};
export default Score;I used PropTypes to enforce that points must be a number. This helps catch errors early during development.
Wrapping It Up
Props are one of the most fundamental concepts in React.
They allow you to:
- Pass data from parent to child
- Share functions for event handling
- Keep components reusable and modular
Over the years, I’ve seen developers struggle with props at first, but once you get the hang of it, you’ll find they make your React apps much more powerful.
If you’re building applications for real-world use cases in the U.S.—like dashboards, e-commerce stores, or HR systems, props will be part of your daily workflow.
I hope this guide gave you a clear, practical understanding of how to pass props in React. Try out each method in your own project, and you’ll quickly see how versatile props can be.
You may like to read:
- Use react-vertical-timeline-component in React
- React cannot update a component while rendering a different component
- How to Use React Component with Children
- React Component Lifecycle Methods with Examples
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
