Loading...
Loading...
By continuing to use the platform, you accept the terms of the Privacy Policy and the use of cookies.
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.
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>
</>
layout, card, modal).function Card({ children }) {
return <div className="card">{children}</div>;
}
<Card>
<h3>Hack Frontend</h3>
<p>Card description</p>
</Card>
function Layout({ children }) {
return (
<>
<Header />
<main>{children}</main>
<Footer />
</>
);
}
<Layout>
<p>Main page</p>
</Layout>
children can be:
Conclusion:
The children prop is a way to nest JSX inside component, making React flexible, modular and well-suited for creating reusable UI solutions.