The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Pass data from a parent to a child by adding named values to the child’s JSX tag, then read them from the child component’s props object.
function Greeting({ name }) {
return <p>Hello, {name}</p>;
}
function App() {
return <Greeting name="Ada" />;
}How do you pass props in JSX?
Write each prop as an attribute on the child component. Use quotes for a string literal, and curly braces when the value is a JavaScript expression, such as a variable, number, function, or object. React’s Passing Props to a Component guide describes this parent-to-child pattern.
function App() {
const person = { name: "Ada Lovelace" };
return <Avatar person={person} size={100} label="Profile photo" />;
}Here, person and size are JavaScript expressions inside braces, while label is a string literal. Double braces are not a special React syntax: in style={{ color: "purple" }}, the outer braces mark a JSX expression and the inner braces create a JavaScript object. See JavaScript in JSX with Curly Braces.
How does the child read props?
A function component receives a single argument: a props object. Destructure the values the component uses, or accept the object and access its fields directly.
Free tools Windows power users keep installed
One-click scans. No signup required.
#1 Best Overall
function Avatar({ person, size }) {
return (
<img
src={person.imageUrl}
alt={person.name}
width={size}
height={size}
/>
);
}
// Also valid:
function Avatar(props) {
return <img src={props.person.imageUrl} width={props.size} />;
}The first form makes the component’s inputs visible at a glance; the second can be useful when referring to the props object as a whole. The official React props guide explains both approaches.
How do defaults work?
Set a default value while destructuring when a prop may be omitted or passed as undefined.
function Avatar({ size = 100 }) {
return <img width={size} height={size} alt="" />;
}
<Avatar /> // size is 100
<Avatar size={undefined} /> // size is 100
<Avatar size={0} /> // size is 0
<Avatar size={null} /> // size is nullJavaScript destructuring defaults apply only when the value is missing or undefined; they do not replace null or 0. React documents this default-prop pattern in its props guide.
How do you pass nested content with children?
When JSX is placed between a component’s opening and closing tags, React makes that content available as the children prop. Render it wherever the wrapper should display the nested content.
Recommended Free Tools
function Card({ children }) {
return <section className="card">{children}</section>;
}
function App() {
return (
<Card>
<h2>Profile</h2>
<p>A short introduction goes here.</p>
</Card>
);
}This composition lets Card provide a container without needing to know which components or elements are inside it. React covers this pattern under Passing Props to a Component.
Can you forward props with spread syntax?
Yes. Use {...props} to pass every enumerable field from an object to another component.
function ProfilePage(props) {
return <ProfileDetails {...props} />;
}Spread can reduce repetitive code when forwarding a set of values, but it can also hide which props a component receives. Prefer naming the values explicitly when that makes the component boundary clearer, and reconsider a chain of components that only forwards props. The React guide recommends using spread with restraint.
Can a child change its props?
No. Treat props as read-only inputs; a child should not mutate the object it receives. When data changes, the parent supplies new values on a later render. For interaction-driven changes, keep the changing data in state and pass the current value and any handler the child needs as props. React describes props as reflecting a component’s data at a point in time in its props guide.
Best Value
What are the special cases and alternatives?
key and ref are not ordinary props
React uses key and ref specially and does not forward them to a component as ordinary props. If the child also needs the same identifier used for list reconciliation, pass it under a separate prop name.
{results.map(result => (
<ResultRow key={result.id} id={result.id} result={result} />
))}In this example, key helps React track list items; id is an ordinary prop that ResultRow can read. The Special Props Warning explains this distinction.
Choose props, composition, or context based on the data path
- Use props for direct, explicit communication from a parent to a child. They make the data path visible.
- Use
childrenwhen a wrapper should arrange nested UI without knowing its details, or when passing JSX avoids intermediate components forwarding values they do not use. - Consider context when a value is needed far down a tree or by many descendants and repeatedly threading it through intermediate components becomes cumbersome. React cautions against switching to context merely because props pass through a few levels.
The React guide to passing data deeply with context discusses these trade-offs. For class components, props are available on the instance as this.props; React recommends defining new components as functions. See the Component reference.
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.
