React Portals - HackMD

# React Portals **Portals :** provide a way to render an element outside the root div ```jsx= ReactDOM.createPortal(child, container) ``` **Child :** is the element that you want to render outside the root **Container :** is the container div that you want to render element inside it ## HTML INDEX FILE WITH PORTAL DIV ```jsx= <html> <body> <div id="root"></div> <div id="portal"></div> </body> </html> ``` ## USE CASES **MODAL EXAMPLE** ```jsx= import React from 'react' import ReactDOM from 'react-dom'; // css import './modal.css' export const Modals = () => { return ReactDOM.createPortal( <> <div className='overlay'/> <div className='modal'> My Modal </div> </>, document.querySelector('#portals') ) } ```