Deviopath › React

Modal Dialog

Medium · Composition

Clicking "Open" shows a modal. Finish the Modal component and use it in App.

Modal receives children and an onClose prop. It renders a <div className="backdrop"> with a <div className="modal"> inside, which contains the children and a "Close" button.

The modal closes when you click "Close" or the backdrop, but clicking inside the modal must not close it (use e.stopPropagation()).

In App, the modal children are <h2>Hello!</h2> and <p>This is a modal.</p>.

Next: Todo List