React children Prop: Composition and Slot Patterns
children is a special prop in React that automatically contains everything inside JSX tag of component when calling it.
It allows passing nested content from parent to child component without explicitly specifying it in props list.
How Does It Work?
Example
function Wrapper({ children }) {
return <div className="box">{children}</div>;
}
export default function App() {
return (
<Wrapper>
<h2>Hello!</h2>
<p>I'm inside Wrapper component</p>
</Wrapper>
);
}
Wrapper component receives in children prop this block:
<>
<h2>Hello!</h2>
<p>I'm inside Wrapper component</p>
</>
Why children?
- Component composition: allows creating wrappers (
layout,card,modal). - Increases reusability and flexibility.
- Allows separating container from content.
Usage Examples
Card
function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<h3>Hack Frontend</h3>
<p>Card description</p>
</Card>
Content slot:
function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
);
}
<Layout>
<p>Main page</p>
</Layout>
Tips
children can be:
- string
- element
- array of elements
- function (in case of render props)
Conclusion:
The children prop is a way to nest JSX inside component, making React flexible, modular and well-suited for creating reusable UI solutions.