Portal

class SimplePortal extends React.Component {
  constructor(props) {
    super(props);

    this.handleClick = this.handleClick.bind(this);

    this.state = {
      show: false,
    };
  }

  handleClick() {
    this.setState((state) => ({ show: !state.show }));
  }

  render() {
    const { show } = this.state;

    const alertStyle = {
      padding: '8px',
      margin: '8px 0',
      border: '1px solid',
      borderColor: '#ccc',
    };

    return (
      <div>
        <Button onClick={this.handleClick}>{show ? 'Unmount children' : 'Mount children'}</Button>
        <div style={alertStyle}>
          <Typography>It looks like I will render here.</Typography>
          {show ? (
            <Portal container={this.container}>
              <Typography>But I actually render here!</Typography>
            </Portal>
          ) : null}
        </div>
        <div
          style={alertStyle}
          ref={(ref) => {
            this.container = ref;
          }}
        />
      </div>
    );
  }
}