children The children Prop
Last updated: 2026-11-02
children The children Prop
children is a special prop: whatever sits between a component's opening and closing tags automatically becomes props.children. It lets a component wrap arbitrary content, which is the basis of generic containers such as layouts, modals and cards. A container therefore only has to decide how to wrap the content, never what the content should be.
| 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 Card({ children }) {
return <div className="card">{children}</div>
}
<Card>Content between the tags is passed to children automatically</Card>⚙️ Parameters
| children | The content between the component's tags: strings, JSX, arrays and even functions all end up in this special prop. |
|---|
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：
Two blue rounded cards: the first wraps a single line of text, the second wraps a bold heading, a paragraph and a button — the same Card container wrapping completely different content.💡 Key Points
💡 Tip children lets a component care about how to wrap instead of what to wrap, which is the core tool behind composition being better than inheritance.
ℹ️ Info children can be a string, an element, an array, or even a function (the render-props pattern).
⚠️ Warning When several children are passed, children is an array — never assume it is a single element.
🏷️ More Rendering & State
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q What is props.children?
A It is the content between a component's opening and closing tags. React passes it automatically under the name children, and it is the basis of container components such as layouts, cards and modals.
Q Can I always treat children as an array?
A Not always: with a single child it is that element itself, and only with several children does it become an array. Use the helpers from React.Children when you need a stable shape.
Q When should I use children and when a named prop?
A Nested content fits children naturally (modals, layouts), while configuration data fits named props (title, color); the two are often combined.
