Flash cards
Review the key moves
1/4
Core idea
What is the main idea behind React Props Children?
Lesson checks
Practice each idea before moving on
Short Mimo-style checks built from this lesson's code, terms, and sequence.
1Quick choice
Which statement best captures the main point of this lesson?
2Fill blank
Complete the missing token from the example code.
___ Son(props) {3Order
Put the learning moves in the order that makes the concept easiest to apply.
From the Parent component, send the content between the opening and closing tags of the Son and Daughter components:
This can be accessed in the other component using the props.
In React, you can send the content between the opening and closing tags of a component, to another component.
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 /> );