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.