MENU


Containment

Some components don't know their children ahead of time. Such components should use the special 'children' prop to pass children elements directly into their output:


RESETRUNFULL
function FancyBorder(props) {
  return (
    <div className={'FancyBorder FancyBorder-' + props.color}>
      {props.children}
    </div>
  );}function WelcomeDialog() {
  return (
    <FancyBorder color="blue">
      <h1 className="Dialog-title">
        Welcome
      </h1>
      <p className="Dialog-message">
        Thank you for visiting our spacecraft!
      </p>
    </FancyBorder>
  );}

Note that you can pass JSX to props:


RESETRUNFULL
function SplitPane(props) {
  return (
    <div className="SplitPane">
      <div className="SplitPane-left">
        {props.left}
      </div>
      <div className="SplitPane-right">
        {props.right}
      </div>
    </div>
  );}function App() {
  return (<SplitPane left={<Contacts />} right={<Chat />} />
  );}