Portals

A quick view stuck inside a carousel

A shop's home page often shows products in a carousel: a box that hides everything outside it, with a strip inside that slides left and right. Each product card has a Quick view button that opens a small window over the page, a modal. Here is the same shelf twice. Press Quick view on the left, close it, then press the one on the right.

1import { useState } from "react";2import { createPortal } from "react-dom";3import QuickView from "./QuickView.jsx";4 5function Shelf({ portal }) {6  const [open, setOpen] = useState(false);7  const close = () => setOpen(false);8 9  return (10    <div className="shelf">11      <div className="track">12        <div className="card">13          <h3>Chai</h3>14          <button onClick={() => setOpen(true)}>Quick view</button>15        </div>16        {open && !portal && <QuickView onClose={close} />}17        {open && portal && createPortal(<QuickView onClose={close} />, document.body)}18      </div>19    </div>20  );21}22 23export default function App() {24  return (25    <div className="shelves">26      <section>27        <h4>Without a portal</h4>28        <Shelf portal={false} />29      </section>30      <section>31        <h4>With a portal</h4>32        <Shelf portal={true} />33      </section>34    </div>35  );36}

Open the QuickView.jsx tab: it draws a div.overlay that the CSS fixes over the whole window (position: fixed; inset: 0), with the modal in its middle. Open styles.css: the shelf hides its overflow, and the track inside it has a transform, the CSS a carousel uses to slide.

On the left, the overlay is squeezed into the shelf and cut off at its edges. Lines 14 and 16 explain it: the button sets open, and line 16 draws QuickView right there, inside the track, where the track's CSS traps it. On the right, line 17 draws the same QuickView through createPortal, with a second argument: document.body. React puts its DOM at the end of the page's body, outside the shelf, and the overlay covers the whole result. Line 28 and line 32 use the same Shelf; only the portal prop differs.

The picture shows the trick. Your components form one tree, the React tree, and the page's elements form another, the DOM tree. Usually they have the same shape. A portal changes only where the DOM goes. QuickView is still Shelf's child: it got onClose from Shelf, and its Close button sets Shelf's state.

createPortal puts the DOM somewhere else

createPortal comes from react-dom (not react-dom/client, where createRoot lives). It takes up to three arguments:

createPortal(children, domNode, key?)

• children: anything React can render, usually some JSX.
• domNode: the DOM element to put it in. It must already exist. Most apps use document.body, or an empty <div id="modal-root"> written in index.html next to the root.
• key, optional: a key, for portals rendered in a list.

It returns something you render like any JSX: put it in your markup, or return it from a component. Here a profile panel shows a toast, a short message in the corner, through a portal. Press Save, then Where is the toast?

1import { useState } from "react";2import { createPortal } from "react-dom";3 4export default function App() {5  const [saved, setSaved] = useState(false);6  const [parent, setParent] = useState("not on the page yet");7 8  function check() {9    const toast = document.querySelector(".toast");10    setParent(toast ? toast.parentElement.tagName : "not on the page yet");11  }12 13  return (14    <div className="panel">15      <h3>Profile</h3>16      <button onClick={() => setSaved(true)}>Save</button>17      <button onClick={check}>Where is the toast?</button>18      <p>The toast's parent element: {parent}</p>19      {saved && createPortal(<p className="toast">Profile saved</p>, document.body)}20    </div>21  );22}

Line 19 is written inside the panel's <div>, and renders the toast through a portal once saved is true. check on lines 8 to 11 looks the toast up in the real page and stores its parent's tag name, which line 18 shows: BODY.

Press Edit & run and change line 19 to {saved && <p className="toast">Profile saved</p>}. Save and check again: the parent is DIV, the panel. The toast looks the same, because nothing around the panel traps a fixed element. The portal only matters when something does, like the carousel's CSS. The playground runs the overview's shelf on this page and lists the real DOM after each change:

App
  Shelf

Press Open the quick view with No portal: div.overlay appears inside div.track, and the overlay covers only the track. Close it, choose With a portal, and open it again: the overlay is now the body's last child, next to div#root, and covers the whole box. The React tree didn't change.

What trapped the modal: overflow, transforms, and stacking

The left shelf in the overview hit two of the three CSS traps that portals get you out of. How to read this table: each row is CSS on an ancestor, what it does to a box inside it, and what changes when the box moves to the body.

The third row is why z-index: 9999 often doesn't help. A stacking context is a group of boxes that the browser layers as one: inside it, z-index sorts the boxes, but the whole group sits at one level among its neighbors. A modal inside a card with opacity: 0.9 can never rise above the card's next sibling, whatever its z-index.

Tooltips hit the first row all the time. Here, each order has a Status button with a tooltip, inside a list that scrolls. Move the mouse over the Status of order #1042, or Tab to it, and read the tooltip. Then tick Use a portal and try again.

1import { useId, useState } from "react";2import { createPortal } from "react-dom";3 4function StatusTip({ text, portal }) {5  const [box, setBox] = useState(null);6  const id = useId();7  const show = (e) => setBox(e.currentTarget.getBoundingClientRect());8  const hide = () => setBox(null);9  const fixed = { position: "fixed", top: box?.bottom + 4, left: box?.right - 180, right: "auto" };10 11  const tip = box && (12    <span id={id} role="tooltip" className="tip" style={portal ? fixed : null}>13      {text}14    </span>15  );16 17  return (18    <span className="tip-anchor">19      <button20        aria-describedby={box ? id : undefined}21        onMouseEnter={show}22        onMouseLeave={hide}23        onFocus={show}24        onBlur={hide}25      >26        Status27      </button>28      {portal && tip ? createPortal(tip, document.body) : tip}29    </span>30  );31}32 33const orders = [34  { id: 1041, text: "Delivered on Monday." },35  { id: 1042, text: "Out for delivery. It should arrive by 6 pm." },36  { id: 1043, text: "Packed. It leaves our shop tomorrow." },37  { id: 1044, text: "Waiting for your payment." },38];39 40export default function App() {41  const [portal, setPortal] = useState(false);42 43  return (44    <>45      <label>46        <input type="checkbox" checked={portal} onChange={(e) => setPortal(e.target.checked)} />47        Use a portal48      </label>49      <div className="orders">50        {orders.map((order) => (51          <div className="row" key={order.id}>52            Order #{order.id}53            <StatusTip text={order.text} portal={portal} />54          </div>55        ))}56      </div>57    </>58  );59}

Without the portal, the tooltip on line 12 sits inside the row, and the list's overflow: auto cuts it off at the list's edge. With the portal, line 28 renders it into document.body, so it needs a place on the screen. Line 7 reads the button's box from getBoundingClientRect() when the mouse or the focus arrives, and line 9 places the tooltip with position: fixed just under the button's bottom edge, lined up with its right edge. Lines 20 to 24 show it on hover and on focus, so keyboard users get it too, and aria-describedby tells screen readers to read it with the button.

A tooltip fixed to the window stays put if the list scrolls under it. Real apps use a positioning library, like Floating UI, that follows scrolling, flips the tooltip above the button near the bottom of the screen, and keeps it on screen. The useLayoutEffect lesson shows how to measure an element before the browser paints.

Events bubble through the React tree

A click on a button bubbles up: after the button's onClick, React runs the onClick of every parent. With a portal, "parent" means the parent in the React tree, not in the DOM. This order row has a Details button that opens a small modal through a portal, and the row listens to clicks twice: with React's onClick, and with the browser's own addEventListener. Press Details, then Close in the modal, and read the log.

1import { useEffect, useRef, useState } from "react";2import { createPortal } from "react-dom";3 4export default function App() {5  const [open, setOpen] = useState(false);6  const [log, setLog] = useState([]);7  const row = useRef(null);8  const add = (line) => setLog((lines) => [...lines, line]);9 10  useEffect(() => {11    const node = row.current;12    const listener = () => add("DOM listener on the row");13    node.addEventListener("click", listener);14    return () => node.removeEventListener("click", listener);15  }, []);16 17  return (18    <>19      <div ref={row} className="row" onClick={() => add("React onClick on the row")}>20        Order #104221        <button onClick={() => setOpen(true)}>Details</button>22        {open &&23          createPortal(24            <div className="modal">25              <p>2 × Chai: $10</p>26              <button27                onClick={() => {28                  add("Close clicked");29                  setOpen(false);30                }}31              >32                Close33              </button>34            </div>,35            document.body,36          )}37      </div>38      <button onClick={() => setLog([])}>Clear the log</button>39      <ol>40        {log.map((line, index) => (41          <li key={index}>{line}</li>42        ))}43      </ol>44    </>45  );46}

Lines 10 to 15 add a DOM listener to the row with addEventListener, in an Effect that removes it again on cleanup. Line 19 gives the row a React onClick. Lines 22 to 36 render the modal through a portal, written inside the row.

Press Details. Two lines: DOM listener on the row, then React onClick on the row. The button is inside the row in both trees, so both hear the click. (The DOM listener goes first: React handles clicks with one listener of its own, at the root, which the click reaches after the row.)

Now press Close. Two more lines: Close clicked, then React onClick on the row, and no DOM listener line. In the DOM, the Close button sits in the body, so the browser's bubbling goes from the button to the body and never passes the row. React still hears it: when a portal mounts, React adds the same listeners to the portal's container, here the body. From there, React's bubbling follows the React tree, where the modal is inside the row, so the row's onClick runs. The same goes for every React event: onKeyDown, onSubmit, onFocus, and the rest. The React's event system lesson, in the Under the hood stage, shows the code that does this.

This is often what you want: a parent can handle a key press or a form submit from inside its modal. When it isn't, like a row that opens an order on any click, stop it in the modal. Press Edit & run and change line 24 to <div className="modal" onClick={(e) => e.stopPropagation()}>. Clear the log and try again: Close adds only Close clicked. The other fix is to render the portal outside the row, so the row isn't its parent in the React tree either.

Context reaches into a portal

Context follows the React tree too. This cart drawer slides in from the right, through a portal, and reads the cart from CartContext. Press Cart (2), then Remove next to Chai.

1import { createContext, useContext, useState } from "react";2import { createPortal } from "react-dom";3 4const CartContext = createContext(null);5 6function CartDrawer({ onClose }) {7  const { items, remove } = useContext(CartContext);8 9  return createPortal(10    <aside className="drawer" aria-label="Your cart">11      <h3>Your cart ({items.length})</h3>12      <ul>13        {items.map((item) => (14          <li key={item}>15            {item} <button onClick={() => remove(item)}>Remove</button>16          </li>17        ))}18      </ul>19      <button onClick={onClose}>Close</button>20    </aside>,21    document.body,22  );23}24 25export default function App() {26  const [items, setItems] = useState(["Chai", "Mint tea"]);27  const [open, setOpen] = useState(false);28  const remove = (name) => setItems(items.filter((item) => item !== name));29 30  return (31    <CartContext value={{ items, remove }}>32      <header>33        <button onClick={() => setOpen(true)}>Cart ({items.length})</button>34      </header>35      {open && <CartDrawer onClose={() => setOpen(false)} />}36    </CartContext>37  );38}

Line 31 provides the cart, and line 35 renders CartDrawer inside the provider. Line 7 reads the context, and line 9 returns the drawer through a portal, so a component can render itself into the body. The drawer's DOM is far from the provider, but useContext looks up the React tree, so it finds App's cart. Remove Chai: the drawer says Your cart (1), and so does the header button on line 33, because both read the same state.

How to read this table: each row is a question about a portal's content, and the tree that answers it.

A modal that keyboard users can use

A portal moves a modal's DOM. It does nothing for the people using it. A keyboard user who opens a modal needs the focus to go into it, to stay inside while it's open, a way out with Escape, and the focus back where they were when it closes. A screen reader needs to know it's a dialog, what it's called, and that the page behind doesn't count. The WAI-ARIA dialog pattern lists these rules; here is a modal that follows the main ones. The line at the top of the result shows where the focus is. Click Remove chai, press Tab a few times, then press Escape.

1import { useState } from "react";2import Modal from "./Modal.jsx";3import FocusReadout from "./FocusReadout.jsx";4 5export default function App() {6  const [open, setOpen] = useState(false);7  const [packs, setPacks] = useState(2);8 9  return (10    <>11      <FocusReadout />12      <main inert={open}>13        <p>Chai: {packs} packs</p>14        <button onClick={() => setOpen(true)}>Remove chai</button>15        <button>Checkout</button>16      </main>17      {open && (18        <Modal title="Remove chai from your cart?" onClose={() => setOpen(false)}>19          <p>You can add it again later.</p>20          <button onClick={() => setOpen(false)}>Keep it</button>21          <button22            onClick={() => {23              setPacks(0);24              setOpen(false);25            }}26          >27            Remove28          </button>29        </Modal>30      )}31    </>32  );33}

In App.jsx, line 14 opens the modal and lines 17 to 30 render it, with two buttons. Line 12 marks <main> as inert while the modal is open: the browser ignores clicks, focus, and screen readers inside it. React 19 accepts inert as a true or false prop; older versions needed inert="". The modal stays usable because inert follows the DOM tree, and the modal's DOM is in the body, outside <main>.

Now open the Modal.jsx tab:

• Lines 36 to 38: role="dialog" says what it is, aria-modal="true" says the page behind doesn't count, and aria-labelledby names it after the heading on line 42, through an id from useId.
• Lines 11 to 15 move the focus. Line 12 remembers the element that had focus, the Remove chai button, in a ref. Line 13 focuses the first button, Keep it, the safe choice. Line 14 is the cleanup: when the modal unmounts, focus goes back to Remove chai.
• Line 18 closes the modal on Escape.
• Lines 19 to 29 are a basic focus trap. Tab on the last button moves to the first (line 28), and Shift+Tab on the first moves to the last (line 25). Everywhere else, the browser moves the focus as usual.

Why ??= on line 12? In development, Strict Mode runs the Effect, its cleanup, and the Effect again. The cleanup tries to focus Remove chai, but <main> is already inert, so the browser refuses and the focus stays on Keep it. ??= (nullish assignment) sets the ref only while it is still null, so the second run keeps Remove chai. With a plain const opener inside the Effect, the second run would remember Keep it, and closing the modal would lose the focus. This is a basic version: a complete one also skips disabled and hidden elements, and handles a modal opened from another modal. Libraries such as Radix UI and React Aria handle those cases; the Accessible React components lesson covers focus more broadly.

When the native dialog element is enough

Browsers now do most of that work themselves. The HTML <dialog> element, opened with its showModal() method, is drawn in the top layer, a layer above the whole page that no overflow, transform, or z-index can reach. So it needs no portal. Here it is inside the same kind of trap as the carousel. Click Remove chai, press Tab, then Escape.

1import { useEffect, useId, useRef, useState } from "react";2 3function ConfirmDialog({ open, title, onClose, children }) {4  const ref = useRef(null);5  const titleId = useId();6 7  useEffect(() => {8    const dialog = ref.current;9    if (open && !dialog.open) dialog.showModal();10    if (!open && dialog.open) dialog.close();11  }, [open]);12 13  return (14    <dialog ref={ref} aria-labelledby={titleId} onClose={onClose}>15      <h3 id={titleId}>{title}</h3>16      {children}17    </dialog>18  );19}20 21export default function App() {22  const [open, setOpen] = useState(false);23  const [packs, setPacks] = useState(2);24 25  return (26    <div className="shelf">27      <p>Chai: {packs} packs</p>28      <button onClick={() => setOpen(true)}>Remove chai</button>29      <ConfirmDialog30        open={open}31        title="Remove chai from your cart?"32        onClose={() => setOpen(false)}33      >34        <button onClick={() => setOpen(false)}>Keep it</button>35        <button36          onClick={() => {37            setPacks(0);38            setOpen(false);39          }}40        >41          Remove42        </button>43      </ConfirmDialog>44    </div>45  );46}

There is no createPortal and no focus code. Lines 7 to 11 keep the element in step with React's open state, through a ref: showModal() when it becomes true, close() when it becomes false. Line 14 passes onClose, because Escape closes the dialog without asking React; onClose sets open back to false, so the state agrees. The browser moves the focus to Keep it, makes the rest of the page inert, closes on Escape, gives focus back to Remove chai, and draws the dark ::backdrop behind it.

Don't open a modal with React's open prop on <dialog>: the open attribute shows the dialog as non-modal, in the page, with none of the above. How to read this table: each row is a job a modal needs done, and who does it in each approach.

For a confirm box, a form, or a picture viewer, <dialog> with showModal() is usually enough. Portals stay useful for what shouldn't block the page: toasts, tooltips, and menus (the popover attribute, which React 19 supports, is another top-layer option for those), and for libraries that need their content in one place in the DOM.

Toasts from anywhere in the shop

Any part of a shop might want to say "Added to your cart". A toast system puts the two lessons together: a provider and a hook, so any component can show a toast, and a portal, so the toasts appear in one corner of the page wherever the button sits. The buttons here are inside a carousel again. Press Add Chai and Add Mint tea.

1import { ToastProvider, useToast } from "./Toasts.jsx";2 3function AddButton({ name }) {4  const toast = useToast();5  return <button onClick={() => toast(`${name} added to your cart`)}>Add {name}</button>;6}7 8export default function App() {9  return (10    <ToastProvider>11      <div className="shelf">12        <AddButton name="Chai" />13        <AddButton name="Mint tea" />14      </div>15    </ToastProvider>16  );17}

In App.jsx, line 4 gets the toast function from useToast, and line 5 calls it on click. In Toasts.jsx, show on lines 10 to 16 adds a toast to the list with an id from line 5, and starts a timer that removes it 3 seconds later. The timer starts in the event handler, not in an Effect, because the click is what causes it.

Lines 21 to 28 render one div.toasts through a portal, always, even with no toasts in it. It has role="status", which makes it a live region: screen readers read out text that appears inside it. A live region must already be on the page when the text arrives, so it can't appear together with its first toast. Line 19 provides show to the whole shop, and the portal sits inside that provider, in the React tree. With server rendering, this always-there portal is the case the "Two rules for the DOM node" box warns about: render it only once the provider has mounted in the browser.

Common mix-ups

• "A portal makes a separate React app." No. The content stays in the same React tree. It keeps its parent's state, context, and event handlers.
• "Clicks in a portal bubble through the DOM, so the parent's onClick won't run." No. React events follow the React tree, so the parent's onClick runs. Only listeners added with addEventListener follow the DOM.
• "A big enough z-index fixes any overlap." No. Inside a stacking context, z-index only competes with that context's boxes, and it can't undo overflow: hidden or a transform.
• "Context doesn't reach into a portal." No. Context looks up the React tree, so the cart drawer in the body reads App's cart.
• "Putting a modal in a portal makes it accessible." No. A portal only moves the DOM. The modal still needs a role and a name, focus moved in and back, Escape, and an inert page behind it.
• "Every modal needs a portal." No. A <dialog> opened with showModal() is drawn in the top layer, above every trap, wherever it sits in the DOM.

Practice exercises

Each exercise shows its code's result under it, or when you press Edit & run. A portal's content shows up in the result like everything else. Try a guess first, then use the hints.

import { createPortal } from "react-dom";

export default function App() {
  return (
    <div id="panel">
      <p>Your profile</p>
      {createPortal(<p id="note">Saved</p>, document.body)}
    </div>
  );
}

1import { createPortal } from "react-dom";2 3export default function App() {4  return (5    <div id="panel">6      <p>Your profile</p>7      {createPortal(<p id="note">Saved</p>, document.body)}8    </div>9  );10}

1import { useState } from "react";2import QuickView from "./QuickView.jsx";3 4export default function App() {5  const [open, setOpen] = useState(false);6 7  return (8    <div className="shelf">9      <div className="track">10        <div className="card">11          <h3>Chai</h3>12          <button onClick={() => setOpen(true)}>Quick view</button>13        </div>14        {open && <QuickView onClose={() => setOpen(false)} />}15      </div>16    </div>17  );18}

1import { useState } from "react";2import { createPortal } from "react-dom";3import QuickView from "./QuickView.jsx";4 5export default function App() {6  const [open, setOpen] = useState(false);7 8  return (9    <div className="shelf">10      <div className="track">11        <div className="card">12          <h3>Chai</h3>13          <button onClick={() => setOpen(true)}>Quick view</button>14        </div>15        {open && createPortal(<QuickView onClose={() => setOpen(false)} />, document.body)}16      </div>17    </div>18  );19}

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";

export default function App() {
  const [open, setOpen] = useState(false);
  const [log, setLog] = useState([]);
  const row = useRef(null);
  const add = (line) => setLog((lines) => [...lines, line]);

  useEffect(() => {
    const node = row.current;
    const listener = () => add("DOM listener on the row");
    node.addEventListener("click", listener);
    return () => node.removeEventListener("click", listener);
  }, []);

  return (
    <>
      <div ref={row} className="row" onClick={() => add("React onClick on the row")}>
        Order #1042
        <button onClick={() => setOpen(true)}>Details</button>
        {open &&
          createPortal(
            <div className="modal">
              <p>2 × Chai: $10</p>
              <button
                onClick={() => {
                  add("Close clicked");
                  setOpen(false);
                }}
              >
                Close
              </button>
            </div>,
            document.body,
          )}
      </div>
      <button onClick={() => setLog([])}>Clear the log</button>
      <ol>
        {log.map((line, index) => (
          <li key={index}>{line}</li>
        ))}
      </ol>
    </>
  );
}

1import { useEffect, useRef, useState } from "react";2import { createPortal } from "react-dom";3 4export default function App() {5  const [open, setOpen] = useState(false);6  const [log, setLog] = useState([]);7  const row = useRef(null);8  const add = (line) => setLog((lines) => [...lines, line]);9 10  useEffect(() => {11    const node = row.current;12    const listener = () => add("DOM listener on the row");13    node.addEventListener("click", listener);14    return () => node.removeEventListener("click", listener);15  }, []);16 17  return (18    <>19      <div ref={row} className="row" onClick={() => add("React onClick on the row")}>20        Order #104221        <button onClick={() => setOpen(true)}>Details</button>22        {open &&23          createPortal(24            <div className="modal">25              <p>2 × Chai: $10</p>26              <button27                onClick={() => {28                  add("Close clicked");29                  setOpen(false);30                }}31              >32                Close33              </button>34            </div>,35            document.body,36          )}37      </div>38      <button onClick={() => setLog([])}>Clear the log</button>39      <ol>40        {log.map((line, index) => (41          <li key={index}>{line}</li>42        ))}43      </ol>44    </>45  );46}

1import { useEffect, useRef, useState } from "react";2import { createPortal } from "react-dom";3 4export default function App() {5  const [open, setOpen] = useState(false);6  const [log, setLog] = useState([]);7  const row = useRef(null);8  const add = (line) => setLog((lines) => [...lines, line]);9 10  useEffect(() => {11    const node = row.current;12    const listener = () => add("DOM listener on the row");13    node.addEventListener("click", listener);14    return () => node.removeEventListener("click", listener);15  }, []);16 17  return (18    <>19      <div ref={row} className="row" onClick={() => add("React onClick on the row")}>20        Order #104221        <button onClick={() => setOpen(true)}>Details</button>22        {open &&23          createPortal(24            <div className="modal">25              <p>2 × Chai: $10</p>26              <button27                onClick={() => {28                  add("Close clicked");29                  setOpen(false);30                }}31              >32                Close33              </button>34            </div>,35            document.body,36          )}37      </div>38      <button onClick={() => setLog([])}>Clear the log</button>39      <ol>40        {log.map((line, index) => (41          <li key={index}>{line}</li>42        ))}43      </ol>44    </>45  );46}

1import { useEffect, useRef, useState } from "react";2import { createPortal } from "react-dom";3 4export default function App() {5  const [open, setOpen] = useState(false);6  const [log, setLog] = useState([]);7  const row = useRef(null);8  const add = (line) => setLog((lines) => [...lines, line]);9 10  useEffect(() => {11    const node = row.current;12    const listener = () => add("DOM listener on the row");13    node.addEventListener("click", listener);14    return () => node.removeEventListener("click", listener);15  }, []);16 17  return (18    <>19      <div ref={row} className="row" onClick={() => add("React onClick on the row")}>20        Order #104221        <button onClick={() => setOpen(true)}>Details</button>22        {open &&23          createPortal(24            <div className="modal" onClick={(e) => e.stopPropagation()}>25              <p>2 × Chai: $10</p>26              <button27                onClick={() => {28                  add("Close clicked");29                  setOpen(false);30                }}31              >32                Close33              </button>34            </div>,35            document.body,36          )}37      </div>38      <button onClick={() => setLog([])}>Clear the log</button>39      <ol>40        {log.map((line, index) => (41          <li key={index}>{line}</li>42        ))}43      </ol>44    </>45  );46}

1import { useState } from "react";2import Modal from "./Modal.jsx";3import FocusReadout from "./FocusReadout.jsx";4 5export default function App() {6  const [open, setOpen] = useState(false);7  const [packs, setPacks] = useState(2);8 9  return (10    <>11      <FocusReadout />12      <main inert={open}>13        <p>Chai: {packs} packs</p>14        <button onClick={() => setOpen(true)}>Remove chai</button>15        <button>Checkout</button>16      </main>17      {open && (18        <Modal title="Remove chai from your cart?" onClose={() => setOpen(false)}>19          <p>You can add it again later.</p>20          <button onClick={() => setOpen(false)}>Keep it</button>21          <button22            onClick={() => {23              setPacks(0);24              setOpen(false);25            }}26          >27            Remove28          </button>29        </Modal>30      )}31    </>32  );33}

1import { useState } from "react";2import Modal from "./Modal.jsx";3import FocusReadout from "./FocusReadout.jsx";4 5export default function App() {6  const [open, setOpen] = useState(false);7  const [packs, setPacks] = useState(2);8 9  return (10    <>11      <FocusReadout />12      <main inert={open}>13        <p>Chai: {packs} packs</p>14        <button onClick={() => setOpen(true)}>Remove chai</button>15        <button>Checkout</button>16      </main>17      {open && (18        <Modal title="Remove chai from your cart?" onClose={() => setOpen(false)}>19          <p>You can add it again later.</p>20          <button onClick={() => setOpen(false)}>Keep it</button>21          <button22            onClick={() => {23              setPacks(0);24              setOpen(false);25            }}26          >27            Remove28          </button>29        </Modal>30      )}31    </>32  );33}

1import { createContext, useContext, useState } from "react";2import { createPortal } from "react-dom";3 4const LanguageContext = createContext("en");5const greetings = { en: "Welcome back, Asha!", hi: "Namaste, Asha!" };6 7function WelcomeBanner() {8  const language = useContext(LanguageContext);9  return createPortal(<p className="banner">{greetings[language]}</p>, document.body);10}11 12export default function App() {13  const [language, setLanguage] = useState("en");14 15  return (16    <>17      <LanguageContext value={language}>18        <p>Language: {language}</p>19        <button onClick={() => setLanguage(language === "en" ? "hi" : "en")}>20          Switch language21        </button>22      </LanguageContext>23      <WelcomeBanner />24    </>25  );26}

1import { createContext, useContext, useState } from "react";2import { createPortal } from "react-dom";3 4const LanguageContext = createContext("en");5const greetings = { en: "Welcome back, Asha!", hi: "Namaste, Asha!" };6 7function WelcomeBanner() {8  const language = useContext(LanguageContext);9  return createPortal(<p className="banner">{greetings[language]}</p>, document.body);10}11 12export default function App() {13  const [language, setLanguage] = useState("en");14 15  return (16    <>17      <LanguageContext value={language}>18        <p>Language: {language}</p>19        <button onClick={() => setLanguage(language === "en" ? "hi" : "en")}>20          Switch language21        </button>22        <WelcomeBanner />23      </LanguageContext>24    </>25  );26}

Check your understanding

For each question, ask which tree answers it: the React tree for events and context, the DOM tree for CSS and the browser's own listeners. Press Edit & run on a question's code to check your answer.

Key takeaways

• createPortal(children, domNode), from react-dom, renders the children into another DOM node, usually document.body.
• Portals get modals, tooltips, menus, and toasts out of ancestors that clip them (overflow), measure fixed positions from themselves (transform), or hold them in a stacking context.
• Only the DOM moves. React events bubble and context flows through the React tree; CSS, inert, and addEventListener follow the DOM tree.
• A click inside a portal runs its React parents' handlers. Stop it with e.stopPropagation() in the portal, or render the portal elsewhere, when that isn't what you want.
• A modal needs role="dialog", aria-modal, a name, focus moved in and kept inside, Escape, focus given back, and an inert page behind it.
• A <dialog> opened with showModal() does most of that itself, in the top layer, with no portal. Keep React's state in step with onClose.

Coming next: Accessible React components. It goes further than the modal: labels and useId, managing focus across a page, keyboard support, and announcing changes.