React Props
Props let you pass data into a component, so the same component can show different content.
Passing Props
You pass props like HTML attributes. The component receives them as one object.
Example
function StudentCard(props) {
return (
<div>
<h3>{props.name}</h3>
<p>Course: {props.course}</p>
</div>
);
}
function App() {
return (
<>
<StudentCard name="Ali Raza" course="Web Development" />
<StudentCard name="Ayesha Khan" course="Graphic Designing" />
</>
);
}Ali Raza Course: Web Development Ayesha Khan Course: Graphic Designing
Props is short for properties.
Destructuring Props
Most React code reads props with destructuring in the function parameters. It is shorter and shows which props the component expects.
Example
function StudentCard({ name, course }) {
return (
<div>
<h3>{name}</h3>
<p>Course: {course}</p>
</div>
);
}Props of Any Type
Strings can use quotes. Every other type uses curly braces.
Example
<ProductCard
title="Wireless Mouse"
price={1200}
inStock={true}
tags={["computer", "accessory"]}
seller={{ name: "Hamid Electronics", city: "Karachi" }}
/>Example
function ProductCard({ title, price, inStock, tags, seller }) {
return (
<div>
<h3>{title}</h3>
<p>Rs {price}</p>
<p>{inStock ? "In stock" : "Out of stock"}</p>
<p>Tags: {tags.join(", ")}</p>
<p>Sold by {seller.name}, {seller.city}</p>
</div>
);
}Wireless Mouse Rs 1200 In stock Tags: computer, accessory Sold by Hamid Electronics, Karachi
You can even pass functions as props. You will use this in the Events lesson.
Default Values
If a prop might be missing, give it a default value in the destructuring:
Example
function Badge({ text, color = "gray" }) {
return <span style={{ backgroundColor: color, padding: "4px" }}>{text}</span>;
}
<Badge text="New" color="green" />
<Badge text="Sale" />The second badge uses gray because no color was passed.
Props Are Read-Only
A component must never change its own props. Props belong to the parent that passed them.
Example
function Price({ amount }) {
amount = amount * 2; // Wrong: do not change props
return <p>{amount}</p>;
}If a value needs to change over time, use state instead (see the useState lesson). Data in React flows one way: from parent to child, through props.
The children Prop
Content you put between a component's opening and closing tags arrives as a special prop called children. This is useful for wrappers like cards, boxes and layouts.
Example
function Card({ title, children }) {
return (
<div className="card">
<h2>{title}</h2>
{children}
</div>
);
}
function App() {
return (
<Card title="Class Timing">
<p>Monday to Friday</p>
<p>4:00 pm to 6:00 pm</p>
</Card>
);
}Class Timing Monday to Friday 4:00 pm to 6:00 pm
Summary
| Idea | Example |
|---|---|
| Pass a prop | <Card title="Hello" /> |
| Read with destructuring | function Card({ title }) {...} |
| Default value | function Card({ title = "Untitled" }) {...} |
| Content between tags | children |
Keep prop names clear and simple: price, isOpen, onSave. Good names make your components easy to reuse.
Exercise
Exercise
What happens to text placed between <Card> and </Card>?