40) Children Props

In React, children props is a special prop that allows you to pass components, elements, or content between opening and closing tags of a component. It’s what makes React components flexible and reusable.
Normally, props are passed like this,

<Component name="Rahul" />

But with children, you pass content like this

<Component>
  <h1>Hello World</h1>
</Component>

Everything inside <Component>...</Component> becomes props.children

How It Works

function Wrapper(props) {
  return <div>{props.children}</div>;
}

<Wrapper>
  <p>This is inside Wrapper</p>
</Wrapper>

Common Use Cases
i) Layout Components

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

<Card>
  <h2>Product</h2>
  <p>Price: ₹100</p>
</Card>

ii) Wrapper Components
Used to apply styles or logic around content.
iii) Reusable UI Patterns
Instead of hardcoding content inside a component, you make it dynamic using children.