React - Dynamically Import Components : <p>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:</p>

<pre><code>    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 &lt;MyComponent /&gt;
        }
    }

    export default Main
</code></pre>

<p>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?</p>
