The goal was to use React.createPortal() to render a modal component inside a <div> other than the application root. This new <div> would be removed when the modal is exited.

The Modal component is used like this:


I'm concerned with my usage of componentWillReceiveProps to handle creation/removal of DOM nodes. It wasn't my first thought and I'm not certain if it's an appropriate use in this case. Are there downsides to my choice?

I could've used componentWillUnmount, which is useful for cleanup actions, but the way the modal is to be used doesn't lend itself to triggering the lifecycle method. In order to trigger componentWillUnmount, I need to render the component conditionally like this:

{this.state.modalOpen && (
  <Modal open={this.state.modalOpen} ...etc>

The modal uses focus trapping and provides other W3 compliance, but I've provided a pared down version here solely for review: https://codesandbox.io/s/30wo64k5xm. The Modal.js component is the one I care about most. I will also paste the code below.

import React, { Component } from "react";
import { createPortal } from "react-dom";
import { bool, func } from "prop-types";

import styles from "./Modal.module.scss";

export default class Modal extends Component {
  static propTypes = {
    closeOnBackgroundClick: bool,
    handleClose: func.isRequired,
    open: bool.isRequired

  modalRoot = document.createElement("div");

  toggleModalRoot = shouldAppend => {
    if (shouldAppend) {
      this.modalRoot.setAttribute("id", "modal-root");
    } else {

  componentWillReceiveProps = nextProps => {

  render() {
    const { children, handleClose } = this.props;
    return createPortal(
      <div className={styles["Modal"]} onClick={handleClose} role="dialog">

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.