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