Props — passing data into components
Components need to be flexible
A Welcome component that always says the same thing is not very useful. What if you want it to greet different people? You pass it data using props (short for "properties").
How do props work?
Props are like function arguments for components. You pass them as attributes:
function Welcome(props) {
return <h1>Hello, {props.name}!</h1>;
}
// using it with different data:
<Welcome name="Riya" /> // Hello, Riya!
<Welcome name="Sam" /> // Hello, Sam!
The same component, different output — driven by the prop you pass in.
The cleaner way: destructuring
Most React code pulls props out directly (remember destructuring from JavaScript):
function Welcome({ name }) {
return <h1>Hello, {name}!</h1>;
}
Cleaner, and you instantly see which props the component expects.
Passing more than text
Props can be any value — numbers, booleans, arrays, objects, even functions:
function ProductCard({ title, price, inStock }) {
return (
<div className="card">
<h2>{title}</h2>
<p>₹{price}</p>
<p>{inStock ? "Available" : "Sold out"}</p>
</div>
);
}
<ProductCard title="Headphones" price={1999} inStock={true} />
Note: text uses quotes (title="..."), but numbers, booleans and other JS values go inside braces (price={1999}).
One important rule: props are read-only
A component must never change its own props. Props flow down from parent to child, one way. The child receives and displays them, but does not modify them. This one-way flow keeps your app predictable.
Props = data passed from a parent into a child component, like function arguments. They make components reusable — and they are read-only.