Loading lesson path
In React, you can send the content between the opening and closing tags of a component, to another component. This can be accessed in the other component using the props.children property.
Parent component, send the content between the opening and closing tags of the
function Son(props) {
return (
<div style=>Formula
< h2 > Son </h2 ><div>{props.children}</div></div>
);
}function Daughter(props) {
const {brand, model} = props;
return (
<div style=>Formula
< h2 > Daughter </h2 ><div>{props.children}</div></div>
);
}function Parent() {
return (<div>
Formula
< h1 > My two Children </h1 ><Son> <p> This was written in the Parent component, but displayed as a part of the Son component </p> </Son> <Daughter> <p> This was written in the Parent component, but displayed as a part of the Daughter component </p> </Daughter> </div>
);
}createRoot(document.getElementById('root')).render( <Parent />
);Example »