Composition vs Inheritance

function FancyBorder(props) {
  return (
    <div>
      { props.children }
    </div>
  );
}

function WelcomeDialog() {
  return (
    <FancyBorder>
      <h1>
        Welcome
      </h1>
      <p>
        Thank you for visiting out spacecraft!
      </p>
    </FancyBorder>
  )
}

• Anything inside the <FancyBorder> JSX tag gets passed into the FancyBorder component as a childern prop. Since FancyBorder renders {props.children} inside a <div>, the passed elements appear in the final output
• Below is another way instead of using children

function SplitPane(props) {
  return (
    <div>
      <div>
        { props.left }
      </div>
      <div>
        { props.right }
      </div>
    </div>
  );
}

function App() {
  return (
    <SplitPane left={<Contacts />} right= {<Chat />} />
  );
}