Import component condinally, reactjs with typescript

Question

import React, { Component } from 'react';    

let SomeComp;
if (process.env.REACT_APP_V === '1') {
  SomeComp = import('../section/SomeComp');
}

Class App

...

render() {
  return {
    {this.state.version === '1' && <SomeComp />}
  }
}

I want to import the SomeComp component conditionally.

Is this the correct way?

The error I'm getting is:

Warning: React.createElement: type is invalid -- expected a string (for built-in components)

If I do a normal

import SomeComp from '../section/SomeComp';

it works. So it's no issue with the export from SomeComp

Any ideas?

I would avoid this if you can. Can't you pass in the component to the component? In any case, the problem here is that dynamic import() is async (it returns a promise) so you cannot render it until it's loaded. — Aaron Beall
– Aaron Beall, Commented May 7, 2019 at 21:51
I see. It's a css issue so I can condionally import the css file instead. — Joe
– Joe, Commented May 7, 2019 at 22:08

KT-mongo · Accepted Answer · 2019-05-08 08:27:51Z

1

Try this:

    const SomeComp = React.lazy(() => import('./SomeComp'));

    Class App
    render() {
      return {
        <Suspense fallback={<div>Loading...</div>}>
         {this.state.version === '1' && <SomeComp />}
        </Suspense>
      }

    }

You will run into issues if you are using a back end server. The suspense should wrap the relevant code that is loaded on demand. You might also want to look into this neat little npm here (react loadable)

edited May 8, 2019 at 8:27

answered May 7, 2019 at 22:15

KT-mongo

2,2125 gold badges20 silver badges31 bronze badges

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

1 Comment

Joe Over a year ago

I get "Add a <Suspense fallback=...> component higher in the tree to provide a loading indicator or placeholder to display."

elainecadman · Accepted Answer · 2019-05-07 21:54:56Z

0

You can use a ternary statement, like an if/else statement. So in this case if version = 1, the component will render:

{(this.state.version === '1') ? <SomeComp />
: null
}

answered May 7, 2019 at 21:54

elainecadman

692 silver badges9 bronze badges

3 Comments

KT-mongo Over a year ago

Why use ternary over logical operator? what is the benefit of returning null here?

elainecadman Over a year ago

@Kleo If you don't want the component to render at all if the requirement is not met you can return an empty div or null.

KT-mongo Over a year ago

First of all, returning an empty div is bad practice. No reason to overload the DOM with an empty div. Second of all, unless you will be doing something with null, you should be using && operator. Logical over ternary always if what you are trying to achieve is simply render or not render.

Collectives™ on Stack Overflow

Import component condinally, reactjs with typescript

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related