CodeBlanks Logo Icon CodeBlanks
Login Register

What is a portal?

Learn to render a component elsewhere in the DOM with createPortal.

What is a portal?

Normally a component renders into the DOM where it is placed. A portal lets you render a component to a different place in the DOM. It uses ReactDOM.createPortal.

The most common use: modals, dropdowns and notifications. These usually render at the top of the page, independent of all content. Without a portal, a parent's overflow: hidden could clip the modal.

The portal renders elsewhere in the DOM but stays a child of its parent in the React tree; events bubble to the parent.

Modal example

Using a portal for a modal is common. First you define a div id="modal-root" in the HTML; outside the app root, as a direct child of body. The modal component portals into this node.

This way the modal is unaffected by the parent's styles. With position: fixed it covers the screen; z-index puts it on top. Behaviors like click-to-close live in the parent.

When the modal closes, the portal content is removed from the DOM; this provides automatic cleanup.

Practice Modal portal

Complete the skeleton below. Write a ModalPortal component; use createPortal to render <div className="modal">Hello</div> into document.getElementById("modal-root"). Export it.

Starter code

App.jsx
import { createPortal } from "react-dom";

// Write the ModalPortal component here

Sample solution

App.jsx
import { createPortal } from "react-dom";

function ModalPortal() {
  return createPortal(
    <div className="modal">Hello</div>,
    document.getElementById("modal-root")
  );
}

export default ModalPortal;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is a portal most used for?

  • Modal Correct answer
  • Liste
  • Form
  • Tablo

Explanation: It is used for modals, dropdowns and notifications.

2 createPortal call

Question 
import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById(____));
Answer 
import { createPortal } from "react-dom";

return createPortal(<Modal />, document.getElementById("modal-root"));

Explanation: createPortal(jsx, container) takes the target node as second arg.

3 What is a portal: match the terms

Term Meaning
createPortal Renders into another node
modal-root Target node
modal Common use
overflow: hidden Problem without a portal

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart