The Tool Desk
Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Pass values to a child by adding named props to its JSX element, then read them from the child component’s props object. Props can hold strings, numbers, objects, arrays, or functions—not just text.
Pass a value from a parent to a child
Put each value on the child’s JSX element using a prop name. Use braces to pass a JavaScript value such as a variable, number, object, array, or function.
As an Amazon Associate I earn from qualifying purchases.
function Avatar({ person, size = 100 }) {
return (
<img
src={person.imageUrl}
alt={person.name}
width={size}
height={size}
/>
);
}
function Profile({ person }) {
return <Avatar person={person} size={80} />;
}Here, Profile passes the person object and the number 80 to Avatar. The child receives them together in one props object. Its parameter can name that object or destructure the values directly. React’s Passing Props to a Component guide describes props as information passed to a JSX tag.
function Avatar(props) {
return <img src={props.person.imageUrl} alt={props.person.name} />;
}
// Equivalent access with destructuring:
function Avatar({ person }) {
return <img src={person.imageUrl} alt={person.name} />;
}Choose explicit props for direct data handoffs
For a direct parent-to-child relationship, use named props and pass only what the child needs. Explicit names make the data flow visible at the place where the child is rendered, and help the components be understood independently.
#1 Best Overall
Props can carry functions as well as data. A parent can pass a callback when the child needs to request an action; the parent can then update the state it owns and render again with updated values.
function SaveButton({ onSave }) {
return <button onClick={onSave}>Save</button>;
}
function Editor() {
function saveChanges() {
// Save or update data owned by this component.
}
return <SaveButton onSave={saveChanges} />;
}Use children to compose nested JSX
When JSX is nested between a component’s opening and closing tags, the component receives that content through the children prop. This is useful for visual wrappers such as cards, panels, or layout components that should not need to know the details of everything inside them.
function Card({ children }) {
return <div className="card">{children}</div>;
}
function Profile({ person }) {
return (
<Card>
<Avatar person={person} />
</Card>
);
}In this example, Card renders the nested Avatar through {'{children}'} without needing to know what component it contains. See React’s guide to passing props and rendering nested content.
Set defaults and forward props deliberately
Provide a fallback for missing values
Destructuring can assign a default when a prop is missing or has the value undefined:
function Avatar({ person, size = 100 }) {
// size is 100 if the caller omits it or passes undefined.
}The default does not replace an explicit value such as 0 or null; it applies when the value is absent or undefined. React documents this pattern in its props guide.
Use prop spreading only when forwarding everything is intentional
You can forward a props object with JSX spread syntax, as in <Avatar {...props} />. Use this when the component is deliberately passing through the entire set. If many components repeatedly forward the same props, consider whether the components should be split or whether nested JSX composition would express the relationship more clearly.
Keep changing data in the component that owns it
Props are inputs to a component, not storage for the child to change. Do not mutate a received prop. When an interaction changes data, update the state that owns that data; React can then render the parent and pass the new value down as props. The React props guide covers passing data, and React’s state-sharing guide explains how components coordinate through shared state.
Use context when explicit forwarding gets in the way
Passing props directly is generally clearest when the parent and child are related and the intermediate components either use the value or make the flow easier to understand. If a value must travel through several components that do not use it, or many descendants need the same information, context can make it available across a subtree without forwarding it at every level.
Best Value
Context is not an automatic replacement for props. Decide based on how many components need the value, whether intermediary components use it, and whether explicit props still make the data flow easy to follow. React’s context guide explains the trade-off and cautions against overusing context.
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.
