Question

161

React - Dynamically Import Components

rated 0 times [ 168] [ 7] / answers: 1 / hits: 76413 / 6 Years ago, mon, january 15, 2018, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

harleyterryp

Add To Favorites

Follow

Total Points: 290

Total Questions: 92

Total Answers: 95

Location: Montenegro

Member since Sun, May 7, 2023

1 Year ago

harleyterryp questions

1 error Filters are deprecated how to solve this error in vue.js 3

Fri, Jun 11, 21, 00:00, 3 Years ago

1 How to Insert an image inside an input field in react js?

Fri, May 28, 21, 00:00, 3 Years ago

1 ElectronJS: Uncaught TypeError: Cannot read property BrowserWindow / getCurrentWindow of undefined

Mon, Nov 23, 20, 00:00, 4 Years ago

1 Access React context API from _app in NextJS

Fri, Oct 2, 20, 00:00, 4 Years ago

1 jsPDF with AutoTable not working - Possible JavaScript issue

Sun, Jun 28, 20, 00:00, 4 Years ago

View All

answered 6 Years ago cortez · Accepted Answer

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.