Create a Modal Dialog

React

JavaScript

Technical Specification

Build a modal dialog that opens on button click and closes via close button or backdrop click.

Input/Output Samples

Input:Click 'Open Modal'

Output:Overlay and dialog appear

Optimal Logic Path

import { useState } from "react";

function ModalExample() {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <button onClick={() => setOpen(true)}>Open Modal</button>
      {open && (
        <div
          onClick={() => setOpen(false)}
        >
          <div
            onClick={(e) => e.stopPropagation()}
          >
            <p>Modal content</p>
            <button onClick={() => setOpen(false)}>Close</button>
          </div>
        </div>
      )}
    </div>
  );
}

Architectural Deep-Dive

We use conditional rendering for the overlay and stop event bubbling inside the modal box.