React Portal

Portals render components outside parent DOM.

Creating Portal

```javascript import { createPortal } from 'react-dom';

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

index.html Setup

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

Usage

```javascript 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!