What is children prop?

The children prop is a special prop in React used to pass elements between the opening and closing tags of a component. It is commonly used in layout and wrapper componnents.

A simple usage of children prop looks as below,

```jsx harmony
function MyDiv({ children }){
return (
<div>
{children}
</div>;
);
}

export default function Greeting() {
return (
<MyDiv>
<span>{"Hello"}</span>
<span>{"World"}</span>
</MyDiv>
);
}

    Here, everything inside `<MyDiv>...</MyDiv>` is passed as children to the custom div component.

    The children can be text, JSX elements, fragments, arrays and functions(for advance use case like render props).

    <details><summary><b>See Class</b></summary>
    <p>

    

jsx harmony
const MyDiv = React.createClass({
render: function () {
return <div>{this.props.children}</div>;
},
});

ReactDOM.render(
<MyDiv>
<span>{"Hello"}</span>
<span>{"World"}</span>
</MyDiv>,
node
);

    </p>
    </details>

    **Note:** There are several methods available in the legacy React API to work with this prop. These include `React.Children.map`, `React.Children.forEach`, `React.Children.count`, `React.Children.only`, `React.Children.toArray`.

> **Modern React Note (React 18/19):** `ReactDOM.render` was deprecated in React 18 and removed in React 19. In modern applications, always use `createRoot` from `react-dom/client`:
> 

jsx
> import { createRoot } from 'react-dom/client';
> const root = createRoot(document.getElementById('root'));
> root.render(<App />);
> ```