Load component dynamically when click on button

App.js

import React, { Component, Suspense } from 'react';
import { BrowserRouter, Route, NavLink } from 'react-router-dom';
import Welcome from './containers/Welcome';
import Home from './containers/Home';
//import Details from './containers/Details';

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

class App extends Component {

  state = { loadComponent: false };

  loadHandler = () => {
    this.setState(prevState => {
      return { loadComponent: !prevState.loadComponent }
    });
  }
  render() {
    return (
      <React.Fragment>
        <button onClick={this.loadHandler}>Load component</button>
        {this.state.loadComponent ?
          (<Suspense fallback={<span>I am working on it ...</span>}><Details /></Suspense>)
          : (<Home />)}
      </React.Fragment>
    );
  }
}
export default App;