Dynamically importing components in ReactJS

Question

I have just been getting my hands dirty with react-js and have come across this piece of code for dynamically importing components in my app which I cant seem to understand?

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import './index.css';

class Dynamic extends Component {
  constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
    const { path } = this.props;
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
  }
  render() {
    const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
    return(
      <div>
        {Component && <Component />} // the code i can't figure out
    //{Component} works fine too
       //{<Component />} gives error
      </div>
    )
  }
}

ReactDOM.render(<Dynamic path='./FirstComponent' />, document.getElementById('root'));

Can someone please explain the line of code which i have highlighted it looks to me some kind of conditional rendering but as far as i know it works like if the left hand evaluates to true the right hand is rendered but why is this code working with only {Component} as well?

can you please explain a little it would be nice to now the actual flow — JayD
– JayD, Commented Jan 18, 2019 at 7:28

Sahil Raj Thapa · Accepted Answer · 2019-01-18 07:29:42Z

1

Because at initial render {Component} evaluates to null. As you have used destructuring.

const { module: Component } = this.state;

so

 Component = null

But when you use <Component/> at initial render there is no <Component/> component. So using { <Component />} gives error.

Using Component and <Component/> are different.

answered Jan 18, 2019 at 7:29

Sahil Raj Thapa

2,4833 gold badges16 silver badges25 bronze badges

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

7 Comments

JayD Over a year ago

ok so how do you explain the line {Component && <Component />}? at the inital render Component is null so <Component /> wont get rendered?

Sahil Raj Thapa Over a year ago

it will evaluate to { null && <Component ./>} so before && operator there is null means false so it will not evaluate the code after && operator

JayD Over a year ago

all right cheers man one more thing the code works fine if i replace the line with only {Component} i just want to know is this right and will it work fine when state is changed and all that?

Sahil Raj Thapa Over a year ago

i would say go with {Component && <Component />}

Sahil Raj Thapa Over a year ago

if you use only {Component} it will run fine at initial render but will give you error at second render because at that time {Component} evalutates to object if module.default is a class component or function component

|

Collectives™ on Stack Overflow

Dynamically importing components in ReactJS

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related