While working on a React project for a client in New York, I had to pass customer details from a parent component to a child component dynamically.
If you’ve ever worked with React, you know how important it is to pass data between components efficiently. But when it comes to passing parameters, especially dynamic ones like user IDs or product names, things can get a little confusing at first.
In this tutorial, I’ll show you simple and practical methods to pass parameters to components in React. These are the same methods I’ve used over the years in production-grade applications.
Passing Parameters Matters in React
React is built around component reusability. Each component should ideally handle one responsibility and receive data from its parent through props.
Passing parameters allows you to:
- Reuse components with different data.
- Make your UI dynamic and data-driven.
- Keep your code modular and clean.
Method 1 – Pass Parameters Using Props
This is the most common and straightforward way to pass data between components.
Let’s say I have a parent component called App and a child component called UserCard. I want to pass the user’s name and city as parameters.
Example
// App.js
import React from "react";
import UserCard from "./UserCard";
function App() {
const userName = "John Doe";
const userCity = "Los Angeles";
return (
<div>
<h1>User Information</h1>
<UserCard name={userName} city={userCity} />
</div>
);
}
export default App;
// UserCard.js
import React from "react";
function UserCard({ name, city }) {
return (
<div style={{ border: "1px solid #ccc", padding: "10px", width: "250px" }}>
<h2>{name}</h2>
<p>City: {city}</p>
</div>
);
}
export default UserCard;You can see the output in the screenshot below.
Here, I’m passing name and city as props from the parent (App) to the child (UserCard). This is the simplest and most effective way to pass static or dynamic data between components.
Method 2 – Pass Parameters Using Functions (Event Handling)
Sometimes, you need to pass parameters when calling a function, for example, when a user clicks a button.
Let me show you how I usually handle this.
Example
// App.js
import React from "react";
import ProductList from "./ProductList";
function App() {
const handleProductClick = (productId) => {
alert(`Product with ID: ${productId} clicked!`);
};
return (
<div>
<h1>Available Products</h1>
<ProductList onProductClick={handleProductClick} />
</div>
);
}
export default App;
// ProductList.js
import React from "react";
function ProductList({ onProductClick }) {
const products = [
{ id: 101, name: "Apple iPhone 15" },
{ id: 102, name: "Samsung Galaxy S24" },
{ id: 103, name: "Google Pixel 9" },
];
return (
<ul>
{products.map((product) => (
<li key={product.id}>
{product.name}{" "}
<button onClick={() => onProductClick(product.id)}>View</button>
</li>
))}
</ul>
);
}
export default ProductList;You can see the output in the screenshot below.
Here, I’m passing the product.id as a parameter to the handleProductClick function. This approach is perfect when you need to handle events dynamically, such as selecting a product, deleting a user, or toggling a status.
Method 3 – Pass Parameters Using React Router
If you’re building a multi-page React app, you’ll often need to pass parameters through routes.
For example, when navigating to a product details page, you can pass the product ID as a route parameter.
Example
// App.js
import React from "react";
import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";
import ProductDetails from "./ProductDetails";
function App() {
const products = [
{ id: 1, name: "Tesla Model S" },
{ id: 2, name: "Ford F-150" },
];
return (
<Router>
<h1>Car Listings</h1>
<ul>
{products.map((car) => (
<li key={car.id}>
<Link to={`/product/${car.id}`}>{car.name}</Link>
</li>
))}
</ul>
<Routes>
<Route path="/product/:id" element={<ProductDetails />} />
</Routes>
</Router>
);
}
export default App;
// ProductDetails.js
import React from "react";
import { useParams } from "react-router-dom";
function ProductDetails() {
const { id } = useParams();
return (
<div>
<h2>Product Details</h2>
<p>Product ID: {id}</p>
</div>
);
}
export default ProductDetails;You can see the output in the screenshot below.
Here, I’m passing the parameter through the URL using React Router’s useParams() hook. This is ideal for real-world apps like e-commerce or booking systems where each page corresponds to a unique item.
Method 4 – Pass Parameters Using Context API
When you need to pass parameters deeply down the component tree (without manually passing props at every level), React Context API is a great choice.
Example
// UserContext.js
import React, { createContext } from "react";
export const UserContext = createContext();
export function UserProvider({ children }) {
const user = { name: "Emily Carter", location: "Chicago" };
return <UserContext.Provider value={user}>{children}</UserContext.Provider>;
}
// App.js
import React from "react";
import { UserProvider } from "./UserContext";
import Dashboard from "./Dashboard";
function App() {
return (
<UserProvider>
<Dashboard />
</UserProvider>
);
}
export default App;
// Dashboard.js
import React, { useContext } from "react";
import { UserContext } from "./UserContext";
function Dashboard() {
const user = useContext(UserContext);
return (
<div>
<h2>Welcome, {user.name}</h2>
<p>Location: {user.location}</p>
</div>
);
}
export default Dashboard;Using the Context API, I can pass parameters globally without prop drilling. This is especially useful for user authentication, themes, or app-wide settings.
Method 5 – Pass Parameters Using Custom Hooks
If you want to manage and share state or parameters across components, custom hooks can make your code much cleaner.
Example
// useUser.js
import { useState } from "react";
export default function useUser() {
const [user, setUser] = useState({ name: "Michael Scott", city: "Scranton" });
const updateCity = (newCity) => {
setUser((prevUser) => ({ ...prevUser, city: newCity }));
};
return { user, updateCity };
}
// App.js
import React from "react";
import useUser from "./useUser";
import UserProfile from "./UserProfile";
function App() {
const { user, updateCity } = useUser();
return (
<div>
<UserProfile user={user} updateCity={updateCity} />
</div>
);
}
export default App;
// UserProfile.js
import React from "react";
function UserProfile({ user, updateCity }) {
return (
<div>
<h2>{user.name}</h2>
<p>City: {user.city}</p>
<button onClick={() => updateCity("New York")}>Move to New York</button>
</div>
);
}
export default UserProfile;This method is perfect when you want to encapsulate logic and make it reusable across multiple components.
While there are multiple ways to pass parameters in React, the method you choose depends on your use case.
If you’re simply passing static data, props are the easiest way. For event handling, use functions. For navigation, React Router is your friend. And for global data, Context API or custom hooks are the best options.
You may also read:
- Build a Simple React Tree View Component
- React Component Design Patterns
- Build a React Chat UI Component
- React Component Refactoring Best Practice
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.
