InterviewLane
Back to React
React
medium
mid

How do you pass data from a parent component to a child component in React?

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.

3 min read·~5 min to think through
Sign in to bookmark & track progress

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:

jsx
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:

jsx
<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:

jsx
<Card><p>content</p></Card>   // Card receives <p> as props.children

Avoiding 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.

Senior engineer discussion

Seniors describe props as one-way, read-only data flow, explain callback props for child-to-parent communication, mention children, and connect prop-drilling pain to Context — plus the referential-stability gotcha with object/function props.

Related questions