A React function component receives one props object. Read the values it needs—often by destructuring—and pass the relevant values to a child as explicit JSX attributes. When a component is only forwarding all its props, JSX spread syntax can do that in one step: <Avatar {...props} />.
Pass props from a parent to a child
Props are values supplied to a JSX component. A function component receives them as its single argument, and they can include JavaScript values such as objects, arrays, and functions. The parent decides what to pass; the child reads those values from its props object. See React’s Passing Props to a Component guide.
function Profile({ person, size }) {
return <Avatar person={person} size={size} />;
}Here, Profile destructures person and size from its props, then supplies them to Avatar. Destructuring is a convenient way to read values; the component still receives a single props object.
Choose explicit attributes or JSX spread
These two forms both pass props to a child, but make different trade-offs:
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →#1 Best Overall
| Form | Example | What it communicates |
|---|---|---|
| Explicit attributes | <Avatar person={person} size={size} /> |
The child’s inputs are visible at the call site. This is usually easier to scan and makes the component’s dependencies apparent. |
| Spread forwarding | <Avatar {...props} /> |
All enumerable props in the object are supplied to the child without naming them individually. It is concise for a wrapper that intentionally forwards the received props without interpreting them. |
Spread shortens code, but it can obscure exactly which values a child receives. Prefer explicit attributes when the component selects, renames, transforms, or combines values. Use spread when forwarding the entire object is the component’s clear purpose.
React’s documentation advises restraint: “Use spread syntax with restraint. If you’re using it in every other component, something is wrong.” The guide also suggests that repeated forwarding can be a sign to split components and pass children as JSX instead.
Set defaults when a prop is absent
A destructuring default handles a missing property or one whose value is undefined:
function Avatar({ size = 100 }) {
return <img width={size} height={size} />;
}The default does not replace null or 0; those are supplied values, not undefined.
Free tools Windows power users keep installed
One-click scans. No signup required.
Type props in TypeScript
Give the component’s props an interface or type so TypeScript can check JSX attributes against the component’s declared inputs. For example:
type AvatarProps = {
person: { name: string };
size: number;
};
function Avatar({ person, size }: AvatarProps) {
return <img
alt={person.name}
width={size}
height={size}
/>;
}When spreading an object into a component, its type must meet that component’s requirements. If a required prop is missing, TypeScript reports an error in the documented example. See the TypeScript JSX handbook for JSX attribute checking, and React’s props guide for how prop types support correctness checking and editor documentation.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Know what does not pass as an ordinary prop
key and ref are special in React; a child cannot read them as ordinary props. If the component also needs an identifier, pass it under a normal prop name such as id:
<Row key={item.id} id={item.id} />key is for React’s handling of the element; id is the value Row can receive and use. React explains this distinction in Special Props Warning.
Quick wins for a faster PC:
Repair Windows errors before they cause bigger problemsFix Now →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Best Value
Use composition or Context when forwarding becomes awkward
Composition with children
If an intermediate component exists mainly to wrap or arrange content, pass the content as nested JSX. React makes that nested JSX available through the children prop, so the wrapper need not receive and forward every value the content needs.
Context for values needed deep in a subtree
When many descendants need the same information, Context can make it available through the subtree without requiring every intermediate component to forward it. React identifies deep or widely repeated prop passing as a case where explicit forwarding can become verbose or inconvenient. Context is an alternative for shared descendant data, rather than a default replacement for straightforward parent-to-child props. See React’s Passing Data Deeply with Context guide.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
