Hack Frontend Community

What is children in React

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.