Create a popup using portal in React

Question

Create a popup using portal in React.

Answer

Portals let you render components outside the root hierarchy — perfect for modals and overlays.

import { useState } from 'react';
import ReactDOM from 'react-dom';

function Modal({ onClose }) {
  return ReactDOM.createPortal(
    <div className='modal-overlay'>
      <div className='modal'>
        <p>This is a portal modal!</p>
        <button onClick={onClose}>Close</button>
      </div>
    </div>,
    document.getElementById('portal-root')
  );
}

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

  return (
    <div>
      <button onClick={() => setOpen(true)}>Show Modal</button>
      {open && <Modal onClose={() => setOpen(false)} />}
    </div>
  );
}

✅ Make sure you have <div id="portal-root"></div> in index.html.

Real-World Example

• Modals, dropdowns, tooltips, context menus

Quick Practice

Create a “Confirm Delete” popup using React Portals that appears above the entire app.

Summary

React Portals render elements outside the root hierarchy — ideal for overlays and modals.