React - Dynamically Import Components

Question

I have a page which renders different components based on user input. At the moment, I have hard coded the imports for each component as shown below:

    import React, { Component } from 'react'     import Component1 from './Component1'     import Component2 from './Component2'     import Component3 from './Component3'      class Main extends Component {         render() {             var components = {                 'Component1': Component1,                 'Component2': Component2,                 'Component3': Component3             };             var type = 'Component1';  // just an example             var MyComponent = Components[type];             return <MyComponent />         }     }      export default Main 

However, I change/add components all the time. Is there a way to perhaps have a file which stores ONLY the names and paths of the components and these are then imported dynamically in another file?

Answer 1

I think there may have been some confusion as to what I was trying to achieve. I managed to solve the issue I was having and have shown my code below which shows how I solved it.

Separate File (ComponentIndex.js):

    let Components = {};      Components['Component1'] = require('./Component1').default;     Components['Component2'] = require('./Component2').default;     Components['Component3'] = require('./Component3').default;      export default Components 

Main File (Main.js):

    import React, { Component } from 'react';     import Components from './ComponentIndex';      class Main extends Component {         render () {             var type = 'Component1'; // example variable - will change from user input             const ComponentToRender = Components[type];             return <ComponentToRender/>         }     }      export default Main 

This method allows me to add/remove components very quickly as the imports are in one file and only requires changing one line at a time.

Answer 2

Since the question is really old, the answers maybe were ok. But nowadays, if someone have the same problem should use dynamic import, in order to load only the component needed and avoid to load all the different ones.

const component = React.lazy(() => import('./component.jsx')); 

try the example here: demo