# React Children

## React Children

&#x20;Any React component can be used as a **non-self closing** element.  Anything placed between the non-self closing tags is accessible inside that component via `props.children`&#x20;

In the Parent component we write the `html` elements we want to render in the page. In the child component we pass the elements through `props.children` so that they get required styles.

{% tabs %}
{% tab title="Callout.js" %}

```jsx
import React from "react"

function Callout(props) {
    return (
        <div className="callout">
            {props.children}
        </div>
    )
}

export default Callout
```

{% endtab %}

{% tab title="App.js" %}

```jsx
import React from "react"
import Callout from "./Callout"

function App() {
    return (
        <main>
            <h1>Welcome!</h1>
            
            // html like non-self closing Component 
            <Callout>
                // Regular html tags 
                <h2>Don't miss out!</h2>
                <p>Unless you don't suffer from FOMO, you better make sure you fill out the email form below!</p>
            </Callout>
            
            <p>This is probably the best site you've ever come across. I'm glad you're here to witness the magnificence of this website right now.</p>
            
            <Callout>
                <img src="https://picsum.photos/id/102/4320/3240" width="100%" />
                <figcaption>Just look at those sparkling raspberries!</figcaption>
            </Callout>
            
            <p>Here's some more unforgettable content. Lorem ipsum something or other.</p>
            
            <Callout>
                <h2>Give us your email. We definitely won't sell it to anyone.</h2>
                <input type="email" placeholder="Enter Email"/>
                <button>Sign me up!</button>
            </Callout>
            
        </main>
    )
}

export default App
```

{% endtab %}

{% tab title="index.js" %}

```jsx
import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

ReactDOM.render(<App />, document.getElementById("root"))

```

{% endtab %}
{% endtabs %}

{% hint style="info" %}
&#x20;We use this approach when we have some components that have **different contents** but **share same design**.
{% endhint %}
