title: React - Dynamically Import Components
body: <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>