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:

    imp         


        

Answer 1

import React, { Component } from 'react'
import Component1 from './Component1'
import Component2 from './Component2'
import Component3 from './Component3'

class Main extends Component {
    render() {
        var type = 'Component1';  // just an example
        return (
          

            {type == "Component1" && }
            {type == "Component2" && }
            ...
          
        )
    }
}

export default Main

You can use conditional rendering insted. Hope it will help

Check this