I have learned that the heart of any project lies in how data moves between components.
Passing values effectively is what makes your UI dynamic and your code reusable.
In this tutorial, I will show you exactly how to pass values to components in React using practical, real-world examples.
Pass a Simple Value via Props
The most common way I pass data in React is through “props.” You can think of props like arguments you pass to a JavaScript function.
When I started developing, I used to get confused about where the data lives. It always flows from the parent down to the child.
Let’s look at a practical example where we pass a state name and its capital city to a display component.
import React from 'react';
// This is the Child Component
const StateInfo = (props) => {
return (
<div style={{ border: '1px solid #ccc', padding: '10px', margin: '10px' }}>
<h3>State: {props.stateName}</h3>
<p>Capital: {props.capital}</p>
</div>
);
};
// This is the Parent Component
const USApp = () => {
return (
<div>
<h1>US State Directory</h1>
<StateInfo stateName="California" capital="Sacramento" />
<StateInfo stateName="Texas" capital="Austin" />
<StateInfo stateName="New York" capital="Albany" />
</div>
);
};
export default USApp;I executed the above example code and added the screenshot below.
In this code, I am passing stateName and capital as attributes. The child component receives them as a single object called props.
Use Destructuring for Cleaner Code
As I gained more experience, I realized that writing props.something every time makes the code look cluttered.
Nowadays, I almost always use ES6 destructuring to extract the values directly in the function signature.
It makes the component much easier to read at a glance. Let’s refactor our previous example using a list of popular US National Parks.
import React from 'react';
// Destructuring props directly in the argument list
const NationalPark = ({ parkName, location, establishedYear }) => {
return (
<div style={{ backgroundColor: '#f4f4f4', padding: '15px', borderRadius: '8px', marginBottom: '10px' }}>
<h2>{parkName}</h2>
<p><strong>Location:</strong> {location}</p>
<p><strong>Established:</strong> {establishedYear}</p>
</div>
);
};
const ParkApp = () => {
return (
<div style={{ padding: '20px' }}>
<h1>Explore USA National Parks</h1>
<NationalPark
parkName="Yellowstone"
location="Wyoming, Montana, Idaho"
establishedYear="1872"
/>
<NationalPark
parkName="Yosemite"
location="California"
establishedYear="1890"
/>
</div>
);
};
export default ParkApp;I executed the above example code and added the screenshot below.
By using { parkName, location, establishedYear }, I don’t have to use the props keyword anymore. This is the industry standard I follow daily.
Pass Objects as Props
Sometimes, passing five or six individual props becomes messy. In my enterprise projects, I prefer grouping related data into a single object.
This is particularly useful when you are dealing with user profiles or complex data models like a US car dealership inventory.
import React from 'react';
const CarCard = ({ vehicle }) => {
return (
<div style={{ border: '2px solid blue', margin: '10px', padding: '10px' }}>
<h2>{vehicle.make} {vehicle.model}</h2>
<ul>
<li>Year: {vehicle.year}</li>
<li>Price: ${vehicle.price.toLocaleString()}</li>
<li>Location: {vehicle.dealership}</li>
</ul>
</div>
);
};
const DealershipApp = () => {
const carData = {
make: "Ford",
model: "F-150",
year: 2023,
price: 45000,
dealership: "Detroit Auto Group"
};
return (
<div>
<h1>Current Inventory</h1>
<CarCard vehicle={carData} />
</div>
);
};
export default DealershipApp;I executed the above example code and added the screenshot below.
In this case, I pass the entire carData object under a single prop name vehicle. It keeps the parent component’s JSX clean.
Pass Functions (Callback Props)
One of the most powerful things I do in React is passing a function from a parent to a child.
This allows the child component to communicate back to the parent. We call this “lifting state up.”
Imagine a simple voting app for your favorite US fast-food chain. The child component handles the button, but the parent tracks the count.
import React, { useState } from 'react';
// Child Component
const VoteButton = ({ brand, onVote }) => {
return (
<button onClick={() => onVote(brand)} style={{ margin: '5px', padding: '10px' }}>
Vote for {brand}
</button>
);
};
// Parent Component
const PollApp = () => {
const [votes, setVotes] = useState({ InNOut: 0, FiveGuys: 0 });
const handleVote = (brand) => {
if (brand === "In-N-Out") {
setVotes({ ...votes, InNOut: votes.InNOut + 1 });
} else {
setVotes({ ...votes, FiveGuys: votes.FiveGuys + 1 });
}
};
return (
<div style={{ textAlign: 'center', marginTop: '50px' }}>
<h1>Best Burger Poll</h1>
<VoteButton brand="In-N-Out" onVote={handleVote} />
<VoteButton brand="Five Guys" onVote={handleVote} />
<div style={{ marginTop: '20px' }}>
<p>In-N-Out Votes: {votes.InNOut}</p>
<p>Five Guys Votes: {votes.FiveGuys}</p>
</div>
</div>
);
};
export default PollApp;Here, the onVote prop is actually a reference to the handleVote function. When the button is clicked, it “triggers” the function in the parent.
Pass Values via Children Prop
I often encounter scenarios where I want to wrap content inside a styled container. React has a special prop for this called children.
It allows you to pass JSX directly between the opening and closing tags of a component.
import React from 'react';
const InfoBox = ({ title, children }) => {
return (
<div style={{ border: '1px solid black', padding: '20px', backgroundColor: '#eef' }}>
<h2 style={{ color: 'red' }}>{title}</h2>
<div>{children}</div>
</div>
);
};
const FederalApp = () => {
return (
<div>
<InfoBox title="IRS Important Notice">
<p>The deadline to file your taxes in the USA is April 15th.</p>
<button>Download Forms</button>
</InfoBox>
<InfoBox title="Social Security Info">
<ul>
<li>Apply online 3 months before retirement.</li>
<li>Keep your card in a safe place.</li>
</ul>
</InfoBox>
</div>
);
};
export default FederalApp;The children prop is incredibly flexible because it doesn’t care what you pass; it could be text, HTML, or other React components.
Pass Data to Components with Default Props
Sometimes, I want a component to have a default value if the parent forgets to provide one.
While you can use Component.defaultProps, the modern way I do this is by using default values in the destructuring assignment.
import React from 'react';
const HolidayBanner = ({ holidayName = "National Holiday", discount = "10%" }) => {
return (
<div style={{ background: 'gold', padding: '10px', textAlign: 'center' }}>
<h1>{holidayName} Sale!</h1>
<p>Get {discount} off all orders across the USA.</p>
</div>
);
};
const StoreApp = () => {
return (
<div>
{/* This uses the passed values */}
<HolidayBanner holidayName="Independence Day" discount="25%" />
{/* This uses the default values */}
<HolidayBanner />
</div>
);
};
export default StoreApp;This ensures that your UI doesn’t break or look empty even if data is missing from an API or a user input.
In this tutorial, I have covered the essential ways to pass values to components in React. Whether you are passing strings, objects, or functions, the logic remains the same: data flows down, and actions flow up.
Other React Tutorials You Might Find Helpful:
- Force a React Child Component to Re-render
- How to Render React Components Online
- Resolve React Data Fetching Issues
- React Function Component Lifecycle
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.
