Dynamic Components in React
Tags: javascript, react, webdev, opensource
Published: 2022-04-09 14:00:54

### Introduction 
Hi there, if you have worked with Vue, you would realise you are able to use components dynamically through the `component` tag as shown below
```vue
<script>
import CustomComponent from 'path-to-custom-component'
import AnotherComponent from 'path-to-another-component'

export default {
  components: {CustomComponent, AnotherComponent},

  data() {
    return {
      activeComponent: 'CustomComponent'
    }
  }
}
</script>

<template>
  <div>
   <component :is="activeComponent" />
  </div>
</template>

```
In this article, I would be demonstrating a way how you can use components dynamically in React.

_lets start coding_

I'm going to assume you already have a react project set up so I'm going to jump right into it 

First, create a `components` folder in the root directory if you do not have one yet. 
Inside the `components` folder, create a new file named `DynamicComponent.js` and add the following code: 

```js
import React from "react";

/**
 * @desc the dynamic component is used to render various component dynamically
 * @params props: {
 *    useDefaultPath: this indicates that the component to be used is in the components folder if set to true else you would have to pass in a different component
 *    is: if `useDefaultPath` is true, you pass in the name of the component file or the path to the component in the component folder eg: NewComponent or BaseUI/NewComponent
 *    ...rest: the props to be passed into the new component
 * }
 */
const DynamicComponent = ({ is, useDefaultPath = true, ...rest }) => {
  return React.createElement(
    useDefaultPath ? require(`./${is}.js`).default : is,
    {
      ...rest,
    }
  );
};

export default DynamicComponent;

```

We can now use this component in other files to dynamically render different components based on conditions we have set. 

Example would be this code below 
```js
import "./App.css";
import DynamicComponent from "./components/DynamicComponent";
import { useState } from "react";

function App() {
  const [activeComponent, setActiveComponent] = useState("SayHello");
  return (
    <div className="App">
      <header className="App-header">
        <DynamicComponent is={activeComponent} name="Sholademi Ayomikun" />

        <button
          onClick={() =>
            // Note that `SayHello` and `SayGoodbye` have been defined in the components folder
            setActiveComponent(
              activeComponent === "SayHello" ? "SayGoodbye" : "SayHello"
            )
          }
        >
          Toggle Component
        </button>
      </header>
    </div>
  );
}

export default App;

```

#### Conclusion 
The article shows how you can use `React.createElement` to dynamically render components. The code for this can be found [here](https://github.com/haywhy43/dynamic-component-react/).
Use cases would be to dynamically change app layout or have multiple tabs with different view. 
Please note that there are several approaches to doing this in React.

Follow me on [twitter](https://twitter.com/ayomikun_elijah) and [github](https://github.com/haywhy43/)

Also subscribe to [my youtube channel](https://www.youtube.com/channel/UCroVFcOuelVGWemqgNZ2e0g). I'm trying to get up to 50 subscribers to start dishing out content there.