title: Rendering a dynamic child component in React
body: <p>I have a menu component that should be dynamically loading element in another container component.  However, the child elements are never rendered.</p>
  
  <p>App.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import './App.css';
  import Menu from './components/navigation/Menu';
  import Header from './components/navigation/Header';
  import Container from './components/navigation/Container';
  
  class App extends Component {
   render() {
      return (
        &lt;div className="App" &gt;
          &lt;Header /&gt;
          &lt;Menu OnMenuChange={(appName) =&gt; { this.setState({ currentApp: appName }) }} /&gt;
          &lt;Container App={this.state.currentApp}/&gt;
        &lt;/div&gt;
      );
    }
  }
  
  
  export default App;
  </code></pre>
  
  <p>Container.js</p>
  
  <pre><code>import React from 'react';
  import './container.css';
  import { MyApp } from '../../apps';
  
  class Container extends React.Component {
  
      render() {
          return (
              &lt;div className="container"&gt;
                  { this.props.App ? &lt;this.props.App /&gt; : null }
              &lt;/div&gt;
          );
      }
  }
  
  export default Container;
  </code></pre>
  
  <p>When the user clicks on a menu option, it triggers OnMenuChange back at the app.js level, which updates the Container component.  Which then puts a "MyApp" element in the container div...</p>
  
  <p>But the constructor and render method are never called in the MyApp component.</p>
  
  <p><strong>Update</strong>
  I moved the list of menu items into the App.js file:</p>
  
  <pre><code>let navGroups = [
    {
      links: [
        {
          key: "myApp",
          name: "My App",
          type: MyApp,
        }
      ]
    }
  ];
  </code></pre>
  
  <p>Then pass that list into the menu which now passes the 'type' back rather than the name.  This works better as the name can now have spaces in it.</p>