Summary - Portal

Make a confirmation dialog a modal rendered outside the root via portal.

Summary - Portal

In this group you learned what a portal is, the modal example, and event propagation. createPortal renders a component to a different DOM node; open and onClose control the modal; stopPropagation stops content clicks from reaching the backdrop.

The portal lets elements like modals and dropdowns render without being affected by parent styles. Thanks to event propagation, the parent can manage state comfortably. In the last step you combine all three tools into a full modal.

Exercise Summary modal

Complete the skeleton below. Write a Modal component; take { open, onClose, children }, return null if open is false, otherwise use createPortal to render <div className="modal" onClick={onClose}>{children}</div>. Export it.

Show example solution

import { createPortal } from "react-dom";

function Modal({ open, onClose, children }) {
  if (!open) return null;
  return createPortal(
    <div className="modal" onClick={onClose}>{children}</div>,
    document.getElementById("modal-root")
  );
}

export default Modal;

Test yourself

Where do portal events go?
- Nowhere
- Body'ye
- To the React parent component
- DOM'a
Show answer

To the React parent component — Portal events bubble to the React parent.
Summary match

createPortal

Renders into another node
open

Open/closed
onClose

Closing
stopPropagation

Stops the event

Next lesson: useRef and computation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies