Rendering a dynamically loaded React component

Question

`Here is my attempt to dynamically load a component at the click of a button, and show on page. https://codesandbox.io/s/sweet-haze-knste?file=/src/App.tsx

I am using the below line of code to dynamically import the component when button is clicked.

const importedComponent = React.lazy(() => import("./DynamicallyImportedComponent"));

And the state is set using

this.setState({
      importModule: importedComponent
      // importModule: CommonEditorCallout
    });

However, this does not render correctly.

When I use the regular import using the below, it renders fine

import DynamicallyImportedComponent from "./DynamicallyImportedComponent";

Is this possibly due to the fact that in the regular import I specify the name of the component I am importing, or something to do with the dynamic import itself?

Sahil Raj Thapa · Accepted Answer · 2020-09-13 05:42:25Z

0

Docs

The lazy component should then be rendered inside a Suspense component, which allows us to show some fallback content (such as a loading indicator) while we’re waiting for the lazy component to load.

So wrapping your lazy loaded component with React.Suspense with a fallback props will fix the error.

 <React.Suspense fallback={<div>Loading...</div>}>
   {this.state.showImportedModule && <div>{<ComponentToShow />}</div>}
 </React.Suspense>

See example

answered Sep 13, 2020 at 5:42

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Rendering a dynamically loaded React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related