React Children

When to use Children

The best case to use Children in React is when you have multiple paragraphs where you want to apply the same style. For example, let's take a look at the codes below.

When you have several different Components

function App(){
  return(
  <main>
    <InfoCallout 
        header="Don't miss out!"
        body="Unless you don't suffer from FOMO"   />
    <ImageCallout 
        img={"https://picsum.photos/id/102/4320/3240"} 
        caption="Just look at those sparkling raspberries!"  />         
    <EmailCallout 
        header="Give us your email." 
    </main>
)}

When you have one Component. As you can see You need to have opening and closing tags to write inside the Component.

function App() {
return (
  <main>
    <Callout> 
         <h2>Don't Miss Out!</h2>
         <p> Unless you don't suffer from Fomo</p>
    </Callout>
    <Callout>
        <img src = "https://picsum.photos/id/102/4320/3240" width="100%"  /> 
        <figcaption> Just look at those sparkling raspberries! </figcaption>
    </Callout>
    <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> )}

In the Callout.jsx file you should have the following code.

import React from "react"

function Callout(props) {
    return (
        <div>
            {props.children}    //This has to be props.children
        </div>
    )
}
export default Callout

However, If you are just trying to pass along some information/data to the component, then you should use props.
Also, one thing to always think about is that Children can be a bit confusing to work with because it does not have any structures unlike props.