React and {props.children}

Launch Academy has had a couple of assignments that use {props.children} in a Header component to render a page of other components below it.  What I discovered today (with full credit going to Jason Arnold's A quick intro to React's props.children ) was that it can be used in other in instances, too.

React components are usually represented by self-closing JSX tags.  What Jason Arnold helped me discover is that they don't have to be!  You can have a React component use a regular closing tag, and put other components/tags within them.

const Wrapper = props => {
    return (
        <BabyComponent>
            <h3>Welcome to the Baby Component!</h3>
       </BabyComponent>
    )
}

Then, at any point in my BabyComponent's return/render I can put {props.children}.  Anything that I put between the BabyComponent's tags in Wrapper (in this case, my <h3> with "Welcome to the Baby Component!") will appear wherever I put {props.children}.

I love learning new facets of something that I thought I fully understood.