Cacher is the code snippet organizer for pro developers

// ReactDOM.createPortal(child, container)
// `child` is any renderable React child
// `container` is a dom element

const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');

class Modal extends React.Component {
  constructor(props) {
    super(props);
    this.el = document.createElement('div');
  }
  
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  
  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }
  
  render() {
    return ReactDOM.createPortal(this.props.children, this.el);
  }
}


class Parent extends React.Component {
  // ...other code place here
  
  render() {
    return (
      <div>
        <Modal>
          child of modal
        </Modal>
      </div>
    );
  }
}

ReactDOM.render(<Parent />, appRoot);