What React skills does "Build a Modal" practice?

This challenge practices: useState, useEffect, event listeners, portals. It is rated medium difficulty and takes approximately 20 minutes.

What are the hints for "Build a Modal"?

Use useEffect to add and remove a keydown event listener for Escape Use e.stopPropagation() on the modal content to prevent backdrop clicks from closing when clicking inside Set document.body.style.overflow = "hidden" when open, and clean it up on close

medium20 min

Build a Modal

Build a reusable modal dialog component. The modal should render as an overlay on top of the page content, close when clicking the backdrop or pressing Escape, and trap focus within the modal for accessibility. Prevent body scroll when the modal is open.

Skills

useStateuseEffectevent listenersportals

Tests

Modal is not visible initially
Opens when the trigger button is clicked
Closes when clicking the close button
Closes when clicking the backdrop
Closes when pressing Escape

Your Code

Loading editor...