React Children

React Children

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

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.

Callout.js

import React from "react"

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

export default Callout

App.js

index.js

We use this approach when we have some components that have different contents but share same design.