How to Dynamically Render Components in React

Sometimes we need to dynamically render React components. For example let's say we are building a drag and drop website builder.

Customer A wants their website to consist of Navbar2, Content1, and Footer3.

<div>
  <Navbar2 />
  <Content1 />
  <Footer3 />
</div>

Customer B on the other hand wants a slightly different website.

<div>
  <Navbar1 />
  <Content3 />
  <Footer1 />
</div>

If we have a lot of components, we are going to end up creating a component for every single possible combination...or we can use dynamic rendering.

First, we need a mapping of our components.

// i.e. const Navbar1 = () => <div>Navbar1</div>

const componentMapping = {
  Navbar1,
  Navbar2,
  Navbar3,
  Content1,
  Content2,
  Content3,
  Footer1,
  Footer2,
  Footer3
};

Then we can render the website for Customer A

const customerA = ['Navbar2', 'Content1', 'Footer3'];

and for Customer B

const customerB = ['Navbar1', 'Content3', 'Footer1'];

with the same dynamic component.

// <Website config={customerA} />
// <Website config={customerB} />

const Website = (props) => {
  return (
    <div>
      {config.map((componentName) => {
        const Component = componentMapping[componentName];
        return <Component />;
      })}
    </div>
  );
};

Comments

[Tseng Tofu]

What if the Navbar component or other component need to pass props？Is this still work?

[Kaiyu Hsu]

You could update your component list to contain the props:

const customerA = [
    { componentName: 'Navbar2', props: { foo: "bar" } },
    { componentName: 'Content1', props: {} },
    { componentName: 'Footer3', props: {} }
];

and your renderer would look like:

const Website = ({ config }) => {
  return (
    <div>
      {config.map(({ componentName, props }) => {
        const Component = componentMapping[componentName];
        return <Component {...props} />;
      })}
    </div>
  );
};

[Hammed Oyedele]

Not so efficient because the components are still rendered but not in the DOM, a better option is to use function that return the component in the mapping then call the function in map callback.

[Andrew Lee]

Good catch! Just noticed the typo in my componentMapping. Before it was something like

const componentMapping = {
  Navbar1: <Navbar1 />
}

I just changed it to this so we render in the map callback.

const componentMapping = {
  Navbar1
}

[Hammed Oyedele]

Oh...I get it now.
😁😁😁