A portal renders a child into a different DOM node while keeping it in the React tree (state, events, context all still work).
ReactDOM.createPortal(
<div>I render somewhere else</div>,
document.body
);
Why? CSS. A parent with overflow: hidden or a stacking context will clip or trap your modal. Portaling out to document.body escapes that.
Your Task
Build an open/close modal that portals out of the app:
- Hold an
open boolean state, initially false
<button id="open-modal"> flips it to true- When open, render a
Modal component using ReactDOM.createPortal into document.body
- The modal contains:
- A container with id
"modal"
- A
<button id="close-modal"> that flips state back to false