How to dynamically import a module in Javascript / ReactJs / React Native

Question

I would like to dynamically import a module from a path importPath set via Props.

var importPath;

class MainComponent extends Component {
    state = {}
    render() {
        // Set var importPath = "path_to_module here;"
        // importPath = this.props.myModulePath
        return (
            <ComponentToImport myComponentPath="./ToastExample" />);
    }
}

export default MainComponent;

Then :

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

How can I go about this?

Thank you all in advance.

How do I attach ToastExample in import ToastExample from importPath; to await import("importPath"); so that I can return(<ToastExample />);

UPDATE

I have tried :

class ComponentToImport extends Component {
    ToastExample: (async () => {
        await import (this.props.revPath)
    })()

    async sayHiFromJava() {
        this.state.ToastExample.showJ('Awesome', ToastExample.SHORT);
    }

    render() {
        return (<ToastExample />);
    }
}

but I get the error :

error: bundling failed: index.js: index.js:Invalid call at line 28: import(_this.props.myComponentPath)

Answer 1

I guess this is the way:

import("importPath").then(() => {
    // your code
});

or

await import("importPath");

// your code

see more here https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import