Props & One-Way Data Flow

Props are the read-only inputs a parent component passes down to a child, arriving as a single object you can destructure. Data in React flows one way — down from parent to child — so a child never edits its props; instead it calls callback props to send events back up.

Learn Props & One-Way Data Flow in our free React course — an interactive lesson with runnable examples, a practice exercise and a quick recall.

Part of the free React course at LearnCodingFast — hands-on lessons with examples you run in your browser, plus practice exercises and a quick quiz.

1️⃣ Passing & Destructuring Props

A parent sets attributes on a child tag; React bundles them into one props object. Destructure in the parameter list to name each value, and assign defaults for optional ones so the component is safe even when a prop is missing.

2️⃣ Read-Only Props & the children Prop

Props are immutable from the child's point of view: never reassign props.x . If you need a different value, derive a new one. The special children prop holds whatever sits between the component's tags, letting you build flexible wrappers.

Your turn — destructure with a default and a safe conditional:

3️⃣ Callbacks Up & Prop Drilling

Because data only flows down, a child reports back by calling a function prop the parent passed in — for example onClick or onChange . When a value must travel through several components that do not use it just to reach a deep child, that is prop drilling . A level or two is fine; long chains are a signal to use Context instead.

These lines define a child that receives a callback prop and calls it. Put them in the right order:

📋 Quick Reference

No. Props are read-only. Derive a new value or lift the change to the data's owner.

By calling a callback prop the parent passed down. Data flows down; events flow up.

Whatever you nest between the component's opening and closing tags.

Write one function that turns a product's props into a formatted price tag, using a default currency and an optional sale flag. Run it and check your output.

Practice quiz

How do props arrive in a child component?

  • As separate function arguments
  • As global variables
  • As a single props object you can destructure
  • As state

Answer: As a single props object you can destructure. React bundles all attributes into one props object; you typically destructure it in the parameter list.

Can a child component reassign one of its props?

  • No, props are read-only — derive a new value instead
  • Yes, props are mutable
  • Only inside useEffect
  • Only with setState

Answer: No, props are read-only — derive a new value instead. Props are read-only from the child's view; to change data, the owner updates its own state.

What goes into props.children?

  • Only string text
  • The component's state
  • An array of all props
  • Whatever is nested between the component's opening and closing tags

Answer: Whatever is nested between the component's opening and closing tags. props.children holds whatever content sits between the tags, enabling flexible wrappers.

In React, data flows ___ and events flow ___.

  • up; down
  • down; up
  • both ways equally
  • sideways; sideways

Answer: down; up. Data flows down from parent to child; events flow up via callback props.

How does a child notify its parent that something happened?

  • By calling a callback prop the parent passed down
  • By mutating a shared object
  • By updating the parent's state directly
  • By throwing an error

Answer: By calling a callback prop the parent passed down. The parent passes a function (callback) down; the child calls it with data. Events flow up.

How do you give a prop a default value?

  • props.size || 48 only
  • useState(48)
  • Destructure with a default: { size = 48 }
  • defaultProps is the only way

Answer: Destructure with a default: { size = 48 }. Destructuring defaults like { size = 48 } fill in missing optional props cleanly.

What is 'prop drilling'?

  • Mutating a prop deep in the tree
  • Passing a prop through many intermediate components that don't use it to reach a deep child
  • Using too many default props
  • Calling a callback prop

Answer: Passing a prop through many intermediate components that don't use it to reach a deep child. Threading a prop through layers that don't need it; long chains are a signal to use Context.

Which correctly passes a handler so it runs on click, not immediately?

  • onClick={handleSave()}
  • onClick=handleSave
  • onClick={() handleSave}
  • onClick={handleSave}

Answer: onClick={handleSave}. Pass the function reference; adding () calls it immediately during render.

A long chain of prop drilling is a signal to reach for…

  • More default props
  • Context (or a state library)
  • Mutating props
  • Class components

Answer: Context (or a state library). When a value travels through many components that don't use it, Context avoids the drilling.

If you need a different value than a prop provides, you should…

  • Reassign the prop
  • Store it in the prop object
  • Derive a new value from it
  • Mutate props.items with push

Answer: Derive a new value from it. Never mutate props; derive a new value (e.g. props.name.toUpperCase()) to keep one-way flow.