title: React: How to dynamically append child components of differing types into a parent component?
body: <p>I am trying to set the contents of a component <code>&lt;ParentComponent/&gt;</code> dynamically by appending various child components <code>&lt;ChildComponen1/&gt;, &lt;ChildComponen3/&gt;, &lt;ChildComponen3/&gt;</code> according to the props values passed to the <code>&lt;ParentComponent/&gt;</code>. The parent component is a list and the child components are list items with varying content (css, html)</p>
  
  <p>Below I have detailed an approach that I think would be appropriate for the situation however If you have an alternative (more efficient) method of achieving the specified goal of dynamically populating a parent component with various different child components, your insight would be most appreciated.
  Thanks    </p>
  
  <pre><code>class ParentComponent extends React.Component{
      render(){
         return(
  
              &lt;ComponentSwitch type="ChildComponen1"/&gt;  
              &lt;ComponentSwitch type="ChildComponen2"/&gt;
        )
      }
  }
  
  
  class ComponentSwitch extends React.Component{
      render(){
            return(
              //How would I most effectively create a switch here?
            )
      }
  }
  
  ...child components omitted for brevity
  </code></pre>
  
  <p>What would be the most effective and efficient way to achieve this function?
  Thanks</p>