React: How to dynamically append child components of differing types into a parent component?

Question

I am trying to set the contents of a component <ParentComponent/> dynamically by appending various child components <ChildComponen1/>, <ChildComponen3/>, <ChildComponen3/> according to the props values passed to the <ParentComponent/> . The parent component is a list and the child components are list items with varying content (css, html)

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

class ParentComponent extends React.Component{
    render(){
       return(

            <ComponentSwitch type="ChildComponen1"/>  
            <ComponentSwitch type="ChildComponen2"/>
      )
    }
}


class ComponentSwitch extends React.Component{
    render(){
          return(
            //How would I most effectively create a switch here?
          )
    }
}

...child components omitted for brevity

What would be the most effective and efficient way to achieve this function? Thanks

Answer 1

Just write some Javascript...
Many possibilities here, for example:

class ComponentSwitch extends React.Component {
  renderA() {
    return (
      <div>
        ... lot of child components here
      </div>
    );
  }

  render() {
    if (this.props.a) {
      return this.renderA();
    }

    return <B />;
  }
}

Or use switch statement and return component to render. Whatever you do

class ComponentSwitch extends React.Component {
  render() {
    switch (this.props.component) {
      case 'a':
        return <A />;

      case 'b':
        return <B />;

      default:
        return <C />;
    }
  }
}

Do whatever JS allows you to do :)

Answer 2

I'll answer the issue I understood, that I'm not sure is your real problem but here it goes.

First make your type parameter as the real Class you want it to be represented by.

import ChildComponent1 from './ChildComponent1.jsx';
import ChildComponent2 from './ChildComponent2.jsx';

class ParentComponent extends React.Component{
  render(){
     return(
        <ComponentSwitch type={ChildComponen1} name='John'/>  
        <ComponentSwitch type={ChildComponen2} name='Doe'/>
      )
  }
}

Then extract the type from the props , and pass the rest of the props for the child Component .

class ComponentSwitch extends React.Component{
    render(){
      const {
        type: Component,
        ...props,
      } = this.props;

      // props will now have 'name' and other props ready for the child component
      return <Component {...props} />;
    }
}