Why won't my nested React components render?

create-react-app, javascript, reactjs

Solution

To allow components to contain children and render them correctly, you have to use `this.props.children`. This is passed to all components with children as a prop and contains the children of the component, as explained by the React documentation:

Containment

Some components don't know their children ahead of time. This is especially common for components like `Sidebar` or `Dialog` that represent generic "boxes".

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

This lets other components pass arbitrary children to them by nesting the JSX

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

As described in the documentation, some components don't know their children ahead of time -- they may be generic wrappers or boxes of content that vary, which is what your `ControlPanel` is. So, to render the children of your component, you must render the children from the `children` prop explicitly in the parent's `render` method. Thus, apply it like this to your code:

const ControlPanel = (props) => {
    return (
      <div className="control_panel" id="control_panel">
        {props.children}
      </div>
    );
}

Notice how `props.children` is rendered (not `this.props.children` because it is a function component).

Problem

I'm having a problem with my React component. The nested children of my component `ControlPanel` don't seem to be rendering. Here is my code: ``` class App extends Component { render() { return ( <div className="App"> <ControlPanel> <CustomerDisplay /> </ControlPanel> </div> ); } } ``` I have the following two lines at the top of this file: ``` import ControlPanel from './components/control_panel'; import CustomerDisplay from './components/customer_display'; ``` And here is my `ControlPanel` Component: ``` import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './styles.scss'; const ControlPanel = () => { return ( <div className="control_panel" id="control_panel"> </div> ); } export default CSSModules(ControlPanel, styles); ``` I have tried: - Calling the component as a full HTML tag (opening & closing) - Nesting the `CustomerDisplay` component in the `ControlPanel` component (in the `ControlPanel`'s index.jsx file) I know that nesting component's is possible. I've seen it done. For some reason it just won't work for me.

Original source