When I first started building React applications years ago, I often found myself overthinking how data moves between different parts of the UI.
In React, the primary way we share data is by passing variables from a parent component down to a child component.
Whether you are building a simple dashboard or a complex financial app, mastering “Props” (properties) is the most fundamental skill you’ll need.
In this tutorial, I will show you exactly how to pass variables to components using several different methods I use in my daily professional work.
Method 1: Pass a Simple String Variable via Props
The most common scenario you will encounter is passing a static or dynamic string from one component to another.
In this example, let’s imagine we are building a “Welcome Header” for a US-based travel agency app.
The Code Example
Here is the complete code for a functional component setup:
import React from 'react';
// The Child Component
// It receives 'userName' as a prop from the Parent
const WelcomeHeader = (props) => {
return (
<div style={{ padding: '20px', backgroundColor: '#f0f4f8', borderRadius: '8px' }}>
<h1>Welcome back to Great American Travels, {props.userName}!</h1>
<p>Your next adventure in Yellowstone National Park awaits.</p>
</div>
);
};
// The Parent Component
const TravelApp = () => {
const currentVisitor = "Jonathan"; // This is our variable
return (
<div>
{/* We pass the variable 'currentVisitor' to the prop 'userName' */}
<WelcomeHeader userName={currentVisitor} />
</div>
);
};
export default TravelApp;You can refer to the screenshot below to see the output.
In the code above, I defined a variable called currentVisitor inside the TravelApp component.
To send it to the WelcomeHeader, I added an attribute named userName and wrapped the variable in curly braces {}.
Method 2: Pass Multiple Variables and Objects
In real-world projects, you rarely pass just one single string. Usually, you have a set of related data, like a user profile or a product’s details.
Let’s look at a scenario involving a US Real Estate listing where we need to pass an entire object.
The Code Example
import React from 'react';
// Child Component using Destructuring for cleaner code
const PropertyCard = ({ location, price, details }) => {
return (
<div style={{ border: '1px solid #ccc', margin: '10px', padding: '15px' }}>
<h2>Listing in {location}</h2>
<p><strong>Price:</strong> ${price.toLocaleString()} USD</p>
<ul>
<li>Bedrooms: {details.beds}</li>
<li>Bathrooms: {details.baths}</li>
<li>Square Feet: {details.sqft}</li>
</ul>
</div>
);
};
// Parent Component
const RealEstatePortal = () => {
// A variable containing a complex object
const propertyData = {
city: "Austin, Texas",
amount: 550000,
specs: {
beds: 3,
baths: 2,
sqft: 1850
}
};
return (
<div>
<h1>Current Texas Listings</h1>
<PropertyCard
location={propertyData.city}
price={propertyData.amount}
details={propertyData.specs}
/>
</div>
);
};
export default RealEstatePortal;You can refer to the screenshot below to see the output.
I highly recommend using the { location, price, details } syntax in the child component’s arguments.
It makes the code much more readable than writing props.location every time, especially in large files.
Method 3: Pass Variables from State (Dynamic Updates)
Sometimes the variable you want to pass isn’t static; it changes based on user interaction.
For instance, think of a tax calculator where a user enters their annual income.
The Code Example
import React, { useState } from 'react';
// Child Component
const TaxSummary = ({ income }) => {
const estimatedTax = income * 0.25; // Simple 25% flat tax estimation
return (
<div style={{ marginTop: '20px', color: 'darkgreen' }}>
<h3>Tax Calculation Result</h3>
<p>For an income of ${income.toLocaleString()}, your estimated federal tax is ${estimatedTax.toLocaleString()}.</p>
</div>
);
};
// Parent Component
const IncomeTracker = () => {
const [annualSalary, setAnnualSalary] = useState(60000);
const handleUpdate = (e) => {
setAnnualSalary(e.target.value);
};
return (
<div style={{ padding: '30px' }}>
<h2>US Federal Tax Estimator</h2>
<label>Enter your annual salary: </label>
<input
type="number"
value={annualSalary}
onChange={handleUpdate}
/>
{/* Passing a state variable as a prop */}
<TaxSummary income={annualSalary} />
</div>
);
};
export default IncomeTracker;You can refer to the screenshot below to see the output.
When the user types a new number in the input box, the annualSalary state updates.
React automatically re-renders the TaxSummary component with the new value, showing how variables can be “live.”
Method 4: Pass Functions as Variables (Callback Props)
In React, functions are treated as variables. You can pass a function to a child component so the child can communicate back to the parent.
I use this all the time for “Delete” buttons or “Add to Cart” actions in E-commerce apps.
The Code Example
import React, { useState } from 'react';
// Child Component
const ProductItem = ({ name, price, onPurchase }) => {
return (
<div style={{ padding: '10px', borderBottom: '1px solid #ddd' }}>
<span>{name} - ${price} </span>
<button onClick={() => onPurchase(name)}>Buy Now</button>
</div>
);
};
// Parent Component
const ShoppingMall = () => {
const [message, setMessage] = useState("Select an item to buy");
// A function defined as a variable
const handlePurchase = (itemName) => {
setMessage(`Thank you for purchasing the ${itemName}! Shipping to NYC.`);
};
return (
<div style={{ padding: '20px' }}>
<h1>New York City Tech Shop</h1>
<p style={{ fontWeight: 'bold', color: 'blue' }}>{message}</p>
<ProductItem name="MacBook Pro" price={1999} onPurchase={handlePurchase} />
<ProductItem name="iPhone 15" price={999} onPurchase={handlePurchase} />
</div>
);
};
export default ShoppingMall;When passing functions, ensure you aren’t invoking them immediately. Notice I passed handlePurchase, not handlePurchase().
Passing the reference allows the child component to decide exactly when to execute that code.
Key Takeaways for Passing Variables in React
Based on my experience, here are a few rules of thumb to keep your code clean:
- Keep Props Read-Only: A child component should never try to change the prop variable directly.
- Use Descriptive Names: Instead of calling a prop data, call it userProfile or productPrice.
- Validate Your Data: For professional apps, consider using PropTypes or TypeScript to ensure the variable being passed is the right type.
Common Issues to Avoid
I have seen many developers get stuck when trying to pass variables through too many layers (this is called “Prop Drilling”).
If you find yourself passing a variable through five components just to reach a tiny footer, it might be time to look into the Context API.
However, for 90% of your daily tasks, simple props are the most performant and easiest way to manage your app.
In this tutorial, we looked at several ways to pass variables to components in React.
We started with simple strings, moved to objects and state variables, and finally looked at passing functions as variables.
I hope you found this guide helpful and can use these examples in your own React projects.
You may also like to read:
- How to Manage State in React Using Modern Hooks
- React Class Component State
- How to Build Scheduling Calendar Component in React
- React Controlled vs Uncontrolled Components
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.
