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

tsx

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:

tsx

<>
  <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

tsx

function Card({ children }) {
  return <div className="card">{children}</div>;
}

<Card>
  <h3>IT Lead</h3>
  <p>Card description</p>
</Card>

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

Finished reading?

Practice Problems

What is children in React

#How Does It Work?

#Example

#Why children?

#Usage Examples