n React, portals provide a way to render children into a DOM node that exists outside the hierarchy of the parent component. This allows you to break out of the normal component tree structure and place elements in different parts of the DOM, which can be especially useful for modals, tooltips, or other UI elements that need to visually appear outside their normal container but still be part of the React component tree.

Why Use Portals?

Portals allow for rendering UI elements outside of their normal DOM hierarchy, which is often needed for things like:

• Modals
• Tooltips
• Dropdowns
• Overlays

These elements need to be visually rendered outside their parent component for proper positioning and layering (especially if the parent has overflow hidden or other styling constraints). However, they still need to be part of the component’s state and lifecycle.

How Portals Work in React:

React provides the ReactDOM.createPortal() method to create a portal.

Syntax:

• child: The React component or element that you want to render.
• container: The DOM node where the child element will be rendered.

Example of Using Portals:

Let’s say you want to create a modal that should appear at the top of the document, outside the usual flow of your app, but still be part of the React tree for easy state management.

import React from 'react';
import ReactDOM from 'react-dom';

const Modal = ({ isOpen, onClose }) => {
if (!isOpen) return null;

return ReactDOM.createPortal(
<div style={modalStyles}>
<div style={overlayStyles} onClick={onClose}></div>
<div style={modalContentStyles}>
<h2>Modal Title</h2>
<p>This is a modal content!</p>
<button onClick={onClose}>Close</button>
</div>
</div>,
document.getElementById('portal-root') // This should be an element in your HTML
);
};

const modalStyles = {
position: 'fixed',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
backgroundColor: 'white',
padding: '20px',
zIndex: '1000',
};

const overlayStyles = {
position: 'fixed',
top: '0',
left: '0',
right: '0',
bottom: '0',
backgroundColor: 'rgba(0, 0, 0, 0.5)',
zIndex: '999',
};

const modalContentStyles = {
zIndex: '1001',
};

export default Modal;

Now, in your index.html file, you need to have a div with the id="portal-root":

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

Then, in your app, you can render the Modal component like this:

import React, { useState } from 'react';
import Modal from './Modal';

const App = () => {
const [isModalOpen, setIsModalOpen] = useState(false);

return (
<div>
<h1>React Portal Example</h1>
<button onClick={() => setIsModalOpen(true)}>Open Modal</button>
<Modal isOpen={isModalOpen} onClose={() => setIsModalOpen(false)} />
</div>
);
};

export default App;

Why Use Portals?

1. Positioning:

   • Portals allow you to render UI elements (like modals or tooltips) in a different location in the DOM while maintaining their React state and lifecycle.

2. Avoid DOM Overflow Issues:

   • If you have a container with overflow: hidden or other constraints, using portals can help ensure your modals or other elements are displayed correctly without being clipped.

3. Z-Index Management:

   • With portals, you can ensure that elements like modals and dropdowns appear above other elements by rendering them at a higher level in the DOM, such as in a div outside of the main app container.

Important Notes:

• Portals work by rendering content into a different part of the DOM tree, but they still maintain the full functionality of the React component (like event handling, state management, and lifecycle methods).
• Even though portals render outside of the DOM hierarchy, they inherit the parent component’s context (such as state and context values).
• Portals are typically used for elements that need to visually break out of the flow, like modals, tooltips, or popovers.

Summary:

• React Portals allow you to render a child element into a different part of the DOM while maintaining the full React component lifecycle.
• They are commonly used for UI elements like modals, tooltips, overlays, and other components that need to be visually rendered outside of their parent container.
• You can create a portal using ReactDOM.createPortal(child, container) and specify a DOM node (container) where the child should be rendered.