Showing custom children with props.children

There's another way that we can communicate information into some child component. We aren't limited to props as being propName="propValue" or propName="this.state.propValue".

Instead we can take a self-closing tag - <UserProfile /> - and update it so that like <div></div> it is split up into an opening tag and a closing tag: <UserProfile></UserProfile>.

<UserProfile>
  <ProfileContent
    name="Tina"
    location="Tampa, FL"
  />
</UserProfile>

Essentially we are passing the <ProfileContent /> down as props into another component (which we'll call ProfileCard. Notice we're passing props as the argument. The props object now contains a property called children which has all of the values above (name and location). We reference it as `{props.children}.

const ProfileCard = (props) => {
  return (
    <div>
      {props.children}
    <div>
  )
}

To summarize, we wrap a child component with a parent on the parent level to get it to show up inside a child component as {props.children}.