React Portal

Portals render components outside parent DOM.

Creating Portal

import { createPortal } from 'react-dom';

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

index.html Setup

<div id="root"></div>
<div id="modal-root"></div>

Usage

function App() {
  const [show, setShow] = useState(false);

  return (
    <div>
      <button onClick={() => setShow(true)}>Open Modal</button>
      {show && (
        <Modal>
          <h2>Modal Content</h2>
          <button onClick={() => setShow(false)}>Close</button>
        </Modal>
      )}
    </div>
  );
}

Remember

• Use for modals, tooltips
• Renders outside parent DOM
• Events still bubble to parent

Next: Learn fragments!