title: How to dynamically import a module in Javascript / ReactJs / React Native
body: <p>I would like to dynamically import a module from a path <strong><code>importPath</code></strong> set via <strong>Props</strong>.  </p>
  
  <pre><code>var importPath;
  
  class MainComponent extends Component {
      state = {}
      render() {
          // Set var importPath = "path_to_module here;"
          // importPath = this.props.myModulePath
          return (
              &lt;ComponentToImport myComponentPath="./ToastExample" /&gt;);
      }
  }
  
  export default MainComponent;
  </code></pre>
  
  <p><strong>Then :</strong>  </p>
  
  <pre><code>class ComponentToImport extends Component {
      ToastExample: (async () =&gt; {
          await import (this.props.revPath)
      })()
  
      async sayHiFromJava() {
          this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
      }
  
      render() {
          return (&lt;ToastExample /&gt;);
      }
  }
  </code></pre>
  
  <p>How can I go about this?  </p>
  
  <p>Thank you all in advance.</p>
  
  <p>How do I attach <code>ToastExample</code> in <code>import ToastExample from importPath;</code> to <code>await import("importPath");</code> so that I can <code>return(&lt;ToastExample /&gt;);</code>  </p>
  
  <p><strong>UPDATE</strong>  </p>
  
  <p>I have tried :  </p>
  
  <pre><code>class ComponentToImport extends Component {
      ToastExample: (async () =&gt; {
          await import (this.props.revPath)
      })()
  
      async sayHiFromJava() {
          this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
      }
  
      render() {
          return (&lt;ToastExample /&gt;);
      }
  }
  </code></pre>
  
  <p>but I get the error :  </p>
  
  <pre><code>error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.myComponentPath)
  </code></pre>