Portal.jsx

import * as React from 'react';
import ReactDOM from 'react-dom';

/**
 * This component detaches its contents and re-attaches them to document.body (using ReactDOM.createPortal).
 * Use it when you need to circumvent DOM z-stacking (for dialogs, popovers, etc.).
 */
class Portal extends React.Component {
  targetElement = null;

  render() {
    if (this.targetElement === null) {
      this.targetElement = document.body.appendChild(document.createElement('div'));
    }
    const { children, ...rest } = this.props;

    return ReactDOM.createPortal(
      <div {...rest}>
        {children}
      </div>,
      this.targetElement
    );
  }

  componentWillUnmount() {
    if (this.targetElement !== null) {
      document.body.removeChild(this.targetElement);
      this.targetElement = null;
    }
  }
}

export default Portal;