Props
Props pass data from a parent component down to a child.
Syntax
<Greeting name="Ada" age={36} />Props (short for properties) are how a parent passes data to a child. You write them like attributes; the child receives them as a single props object.
Reading props
It is common to destructure the props object in the parameter list so you can use each value directly. Props are read-only — a component must never modify its own props.
Example
function Greeting({ name, age }) {
return <p>{name} is {age} years old.</p>;
}
function App() {
return (
<div>
<Greeting name="Ada" age={36} />
<Greeting name="Alan" age={41} />
</div>
);
}When to use it
- A design system's Button component accepts a variant prop so callers can request 'primary', 'secondary', or 'danger' styling without duplicating markup.
- A data table component receives columns and rows as props so it can be reused across every admin screen with different datasets.
- A notification banner gets its message, type, and onDismiss callback through props so the parent controls what is shown and what happens when the user closes it.
More examples
Passing and reading props
Destructures three props in the parameter list and uses them to control both content and conditional rendering.
function ProductCard({ name, price, inStock }) {
return (
<div className="card">
<h3>{name}</h3>
<p>${price.toFixed(2)}</p>
{!inStock && <span className="badge">Out of stock</span>}
</div>
);
}
// <ProductCard name="Notebook" price={12.99} inStock={true} />Default prop values
Sets default values directly in the destructured parameter list so the component works even when optional props are omitted.
function Avatar({ src, size = 40, alt = 'User avatar' }) {
return (
<img
src={src}
width={size}
height={size}
alt={alt}
className="avatar"
/>
);
}Passing a callback as a prop
Passes a function as a prop so a child component can trigger parent-level state changes without direct coupling.
function DeleteButton({ itemId, onDelete }) {
return (
<button
className="btn btn--danger"
onClick={() => onDelete(itemId)}
>
Delete
</button>
);
}
// Parent
function ItemList({ items, removeItem }) {
return items.map(item => (
<DeleteButton key={item.id} itemId={item.id} onDelete={removeItem} />
));
}
Discussion