Props Passing Props
Last updated: 2026-11-02
Props Passing Props
Props are the data a parent component hands down to a child, and they behave like function arguments: read-only. A child receives text, numbers, objects or even components through props and renders different content depending on them, which makes props the foundation of React's data flow. Because data only travels downwards, the tree stays predictable and every update has a traceable origin.
| Group | Rendering & State |
|---|---|
| Kind | Pattern |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function Badge({ text, color }) { // Destructure props
return <span style={{ color }}>{text}</span>
}
<Badge text="New" color="red" /> // The parent passes data in⚙️ Parameters
| props | The object holding every attribute passed in by the parent; you usually destructure just the fields you need in the function parameter. |
|---|
Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A colored badge reads "Current level: Beginner" with three switching buttons below it; clicking "Advanced" or "Master" changes both the text and the color of the badge — the parent passed new data down through props.💡 Key Points
⚠️ Warning props are read-only: modifying them inside a child breaks the one-way data flow, so ask for a callback and let the parent update its state instead.
💡 Tip Prefer destructuring in the signature ({ name, size }); it reads better than props.name everywhere and makes a component's dependencies obvious at a glance.
ℹ️ Info props can carry any value: strings, numbers, arrays, functions, JSX, even another component.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Can props be modified?
A No. Props belong to the parent and the child can only read them; to change what is displayed, pass a callback prop that lets the parent update its own state.
Q What is the difference between props and state?
A Props are passed in from the outside and are read-only, while state is held by the component itself and can be updated by it; a change in either one triggers a re-render.
Q How does a child send data back to its parent?
A The parent passes a function down as a prop (for example onChange); the child calls it at the right moment with the data and the parent decides how to update.
