How to send data from parent to child component
Props — the primary, one-way mechanism: parent passes values/objects/functions as attributes, child receives them as a props object. Data flows down; for child-to-parent, pass a callback prop. For deep trees, Context avoids prop-drilling. children is a special prop for nesting.
Parent → child data flow in React is props — that's the fundamental, one-directional mechanism.
Props — the basic mechanism
The parent passes data as JSX attributes; the child receives a single props object:
function Parent() {
const user = { name: "Ada" };
return <Child name="Ada" age={30} user={user} onSave={handleSave} />;
}
function Child({ name, age, user, onSave }) { // destructure props
return <p>{name} is {age}</p>;
}You can pass anything — strings, numbers, objects, arrays, functions, even JSX/components.
Key properties of props
- One-way / unidirectional — data flows down, parent to child. This is deliberate: predictable data flow.
- Read-only — the child must never mutate props. If it needs to change something, it asks the parent (see below) or keeps its own state.
- Re-render on change — when the parent passes new prop values, the child re-renders.
Child → parent: pass a callback
Since props only flow down, to send data up you pass a function as a prop; the child calls it:
<Child onSelect={(item) => setSelected(item)} />
// child: <button onClick={() => onSelect(thing)}>The children prop
children is a special prop — whatever you nest between a component's tags:
<Card><p>content</p></Card> // Card receives <p> as props.childrenAvoiding prop-drilling
Passing a prop through many intermediate components that don't use it ("prop-drilling") is a smell. For widely-needed data (theme, current user), use Context — or a state library — so deep descendants read it directly without every layer threading it through.
The framing
"Props — the parent passes data as JSX attributes, the child receives a props object. It's one-way and read-only: data flows down, and the child must never mutate props. You can pass anything, including functions — which is exactly how you send data back up: a callback prop the child invokes. children is the special prop for nested content. And when a prop has to travel through many layers that don't use it, that's prop-drilling — the signal to reach for Context."
Follow-up questions
- •Why are props read-only / immutable?
- •How do you send data from a child back to a parent?
- •What is prop-drilling and how do you avoid it?
- •What's the difference between props and state?
Common mistakes
- •Mutating props inside the child.
- •Thinking data can flow up directly without a callback.
- •Prop-drilling through many layers instead of using Context.
- •Confusing props (passed in, read-only) with state (owned, mutable).
Performance considerations
- •New object/array/function references passed as props each render break React.memo and can cause needless child re-renders — stabilize with useMemo/useCallback when it matters.
Edge cases
- •Passing an object/array prop — a new reference each render can defeat memoization.
- •Default prop values when a prop is omitted.
- •Passing components or render functions as props.
Real-world examples
- •A list passing each item's data and an onDelete callback to row components.
- •Theme/auth passed via Context instead of drilled through every layout layer.