Some components don't know their children ahead of time. (eg. components like Sidebar or Dialog that represent generic “boxes”). It is recommend that such components use the special children prop to pass children elements directly into their output.

    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>
        );
    }
        

While this is less common, sometimes you might need multiple "holes" in a component. In such cases you may come up with your own convention instead of using children

    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 /> } /> );
    }
        

    function Dialog(props) {
        return (
            <FancyBorder color="blue">
                <h1 className="Dialog-title"> {props.title} </h1>
                <p className="Dialog-message"> {props.message} </p>
            </FancyBorder>
        );
    }

    function WelcomeDialog() {
        return ( <Dialog title="Welcome" message="Thank you for visiting!" /> );
    }