React course menu
React Props: Passing Data to Components
Learn React props: passing strings, numbers, objects, arrays and functions to components, destructuring props, default values, the children prop, spreading props, and why props are read-only.
On this page
Props (short for properties) are how a parent component passes data to a child. They make components reusable: the same ProductCard can show any product.
Passing and reading props#
Pass props like HTML attributes; the component receives them as one object:
function ProductCard(props) {
return (
<div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 10, marginBottom: 8 }}>
<strong>{props.name}</strong> — ₹{props.price}
</div>
);
}
export default function App() {
return (
<div>
<ProductCard name="Notebook" price={60} />
<ProductCard name="Gel pen" price={25} />
<ProductCard name="Backpack" price={1299} />
</div>
);
}Strings can use quotes; every other type (numbers, booleans, objects, arrays, functions) uses braces: price={60}. price="60" would pass the string "60".
Destructuring props#
Most React code destructures the props object right in the parameter list, which is shorter and shows at a glance what the component expects:
function Avatar({ name, size = 48, online = false }) {
const initials = name.split(" ").map((part) => part[0]).join("");
return (
<div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}>
<div
style={{
width: size, height: size, borderRadius: "50%", background: "#4c6ef5", color: "white",
display: "grid", placeItems: "center", fontWeight: "bold",
}}
>
{initials}
</div>
<span>{name} {online ? "🟢" : "⚪"}</span>
</div>
);
}
export default function App() {
return (
<div>
<Avatar name="Asha Rao" online />
<Avatar name="Vikram Singh" size={32} />
</div>
);
}size = 48is a default value, used when the prop is not passed.- A prop written without a value, like
online, istrue.
Objects, arrays and functions as props#
import { useState } from "react";
function OrderSummary({ customer, items, onConfirm }) {
const total = items.reduce((sum, item) => sum + item.price * item.qty, 0);
return (
<div>
<p>Customer: {customer.name} ({customer.city})</p>
<p>{items.length} items, total ₹{total}</p>
<button onClick={onConfirm}>Confirm order</button>
</div>
);
}
export default function App() {
const [confirmed, setConfirmed] = useState(false);
const customer = { name: "Meera", city: "Pune" };
const items = [
{ name: "Rice 5kg", price: 420, qty: 1 },
{ name: "Dal 1kg", price: 140, qty: 2 },
];
return (
<div>
<OrderSummary customer={customer} items={items} onConfirm={() => setConfirmed(true)} />
{confirmed && <p>Order confirmed!</p>}
</div>
);
}Passing a function as a prop (onConfirm) lets the child tell the parent that something happened: here the parent then shows a confirmation (using useState, explained in State). This is the standard way for data to flow back up, covered fully in Sharing State Between Components.
The children prop#
Content placed between a component's opening and closing tags arrives as the special children prop. This is perfect for wrappers such as cards, panels and layouts:
function Card({ title, children }) {
return (
<section style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, marginBottom: 10 }}>
<h3 style={{ marginTop: 0 }}>{title}</h3>
{children}
</section>
);
}
export default function App() {
return (
<div>
<Card title="Today's tip">
<p>Props flow from parent to child.</p>
</Card>
<Card title="Shopping list">
<ul>
<li>Milk</li>
<li>Bread</li>
</ul>
</Card>
</div>
);
}Props are read-only#
A component must never change its own props. Props belong to the parent; to show something different, the parent passes different props. For values that a component changes itself (a counter, form input), use state.
Spreading props#
{...object} passes every property of an object as a separate prop. It is handy for forwarding props, but use it sparingly, because it hides which props a component actually receives:
const product = { name: "Lamp", price: 799 };
<ProductCard {...product} />; // same as <ProductCard name="Lamp" price={799} />Common mistakes#
Practice#
Practice exercise
Create a Student component that takes name, marks and an optional maxMarks (default 100) and shows the name and the percentage (1 decimal). Render it for Riya (432 of 500) and Kabir (78, using the default).
Show hint
Destructure with a default: function Student({ name, marks, maxMarks = 100 }), then compute (marks / maxMarks * 100).toFixed(1).
Show solution
function Student({ name, marks, maxMarks = 100 }) {
const percent = ((marks / maxMarks) * 100).toFixed(1);
return <p>{name}: {percent}%</p>;
}
export default function App() {
return (
<div>
<Student name="Riya" marks={432} maxMarks={500} />
<Student name="Kabir" marks={78} />
</div>
);
}Key takeaway#
Next: Conditional Rendering.
Finished this lesson?