When I was working on a React project where I needed to pass data from a parent component to a child component. This is where props come in handy in React. Props (short for properties) are a fundamental concept in React that allows components to communicate with each other.
In this article, I will cover what props are, how to use them effectively, and several methods to implement them in your React applications.
So let’s get started!
Props in React
Props are the mechanism in React for passing data from a parent component to a child component. They’re read-only and help make your components more reusable by allowing them to be customized with different data.
Think of props like function parameters – they allow you to send values to your components that can then influence how those components render.
Basic Props Implementation
The easiest way to use props is to pass them directly to a child component. Here’s how it works:
// Parent component
function ParentComponent() {
return (
<ChildComponent name="John" age={30} location="New York" />
);
}
// Child component
function ChildComponent(props) {
return (
<div>
<h1>Hello, {props.name}</h1>
<p>Age: {props.age}</p>
<p>Location: {props.location}</p>
</div>
);
}You can see the output in the screenshot below.
In this example, I’m passing three props to the child component: name, age, and location. The child component then accesses these values through the props object.
Props Destructuring
As your components grow, it can get tedious to keep typing props.something. That’s where destructuring comes in handy:
function ChildComponent({ name, age, location }) {
return (
<div>
<h1>Hello, {name}</h1>
<p>Age: {age}</p>
<p>Location: {location}</p>
</div>
);
}You can see the output in the screenshot below.
By destructuring the props in the function parameters, the code becomes cleaner and more readable.
Default Props
Sometimes, you might want to provide fallback values for props if they’re not provided. Here’s how to set default props:
function ChildComponent({ name = "Guest", age = 25, location = "Unknown" }) {
return (
<div>
<h1>Hello, {name}</h1>
<p>Age: {age}</p>
<p>Location: {location}</p>
</div>
);
}Alternatively, you can use the defaultProps property:
function ChildComponent(props) {
return (
<div>
<h1>Hello, {props.name}</h1>
<p>Age: {props.age}</p>
<p>Location: {props.location}</p>
</div>
);
}
ChildComponent.defaultProps = {
name: "Guest",
age: 25,
location: "Unknown"
};You can see the output in the screenshot below.
Pass Functions as Props
Props aren’t limited to just data – you can also pass functions from parent to child:
function ParentComponent() {
const handleClick = () => {
alert("Button was clicked!");
};
return (
<ChildComponent onClick={handleClick} />
);
}
function ChildComponent({ onClick }) {
return (
<button onClick={onClick}>Click me</button>
);
}This pattern is very common in React and allows for communication from child components back up to parent components.
Read Form Validation in React.js
Pass Children Props
React has a special prop called children that allows you to pass components as data to other components:
function Card({ title, children }) {
return (
<div className="card">
<div className="card-header">{title}</div>
<div className="card-body">{children}</div>
</div>
);
}
function App() {
return (
<Card title="Welcome to React">
<p>This is a paragraph inside the Card component.</p>
<button>Click me</button>
</Card>
);
}The children prop contains everything that was placed between the opening and closing tags of the Card component.
Prop Types for Type Checking
As your application grows, it’s a good practice to add prop type validation:
import PropTypes from 'prop-types';
function UserProfile({ name, age, isAdmin }) {
return (
<div>
<h1>{name}</h1>
<p>Age: {age}</p>
{isAdmin && <p>Admin User</p>}
</div>
);
}
UserProfile.propTypes = {
name: PropTypes.string.isRequired,
age: PropTypes.number,
isAdmin: PropTypes.bool
};This helps catch bugs early by validating the types of props passed to your components.
Check out React Cancel Button: 5 Methods with Examples
Pass Props to Class Components
If you’re working with class components instead of function components, props are accessed through this.props:
import React, { Component } from 'react';
class ChildComponent extends Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
<p>Age: {this.props.age}</p>
<p>Location: {this.props.location}</p>
</div>
);
}
}Spread Props
If you need to pass many props to a component, you can use the spread operator:
function ParentComponent() {
const userProps = {
name: "Sarah",
age: 28,
location: "Chicago"
};
return <ChildComponent {...userProps} />;
}This is particularly useful when you’re forwarding props to a child component without knowing exactly what props are being passed.
Read How to Upload Files in React JS
Real-world Example: E-commerce Product Card
Let’s look at a practical example of using props in a real-world scenario – an e-commerce product card:
function ProductCard({ product, onAddToCart }) {
const { name, price, imageUrl, inStock } = product;
return (
<div className="product-card">
<img src={imageUrl} alt={name} />
<h3>{name}</h3>
<p>${price.toFixed(2)}</p>
{inStock ? (
<button onClick={() => onAddToCart(product)}>Add to Cart</button>
) : (
<p className="out-of-stock">Out of Stock</p>
)}
</div>
);
}
function ShopPage() {
const handleAddToCart = (product) => {
console.log(`Added ${product.name} to cart`);
// Add to cart logic here
};
const product = {
id: 1,
name: "Nike Air Max",
price: 129.99,
imageUrl: "/images/nike-air-max.jpg",
inStock: true
};
return (
<div className="shop-page">
<h1>Our Products</h1>
<ProductCard
product={product}
onAddToCart={handleAddToCart}
/>
</div>
);
}In this example, I’m passing both data (the product object) and behavior (the onAddToCart function) as props to create a reusable product card component.
Props are one of the most useful concepts in React, allowing you to create flexible, reusable components. By mastering props, you’ll be able to build complex user interfaces with components that can be customized and composed together.
I hope you found this article helpful.
Other React articles you may also like:
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.
