Props Children
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.
Example
From the Parent component, send the content between the opening and closing tags of the Son and Daughter components:
function Son(props) {
return ( <div style={{background: 'lightgreen'}}> <h2>Son</h2> <div>{props.children}</div> </div> );
}
function Daughter(props) {
const {brand, model} = props;
return ( <div style={{background: 'lightblue'}}> <h2>Daughter</h2> <div>{props.children}</div> </div> );
}
function Parent() {
return ( <div> <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 /> );