---
title: "Explain the concept of portals in React."  
description: "Explain the concept of portals in React."  
author: "Revati S Misra"  
published: 2023-10-05  
updated: 2023-10-06  
canonical: https://www.mindstick.com/forum/160051/explain-the-concept-of-portals-in-react  
category: "React js"  
tags: ["javascript", "reactjs"]  
reading_time: 3 minutes  

---

# Explain the concept of portals in React.

[Explain the concept](https://www.mindstick.com/forum/159605/explain-the-concept-of-unique-key-violation-error) of portals in React.

## Replies

### Reply by Aryan Kumar

Portals in React are a way to render a component's content in a different part of the DOM (Document Object Model) hierarchy than where the component itself is rendered. Portals provide a mechanism to break out of the normal parent-child hierarchy in React and render a component's content into a different DOM element that may not be a direct child of the component's parent. This can be useful for scenarios like modals, tooltips, and other UI elements that need to be rendered at a higher level in the DOM hierarchy.

Here's a simplified explanation of the [concept](https://www.mindstick.com/blog/79/routing-concept-in-dot-net) of portals in React:

**Normal React Rendering**:

In a typical React application, when you render a component, its output is placed within the DOM element where the component is mounted. For example, if you render a modal component within another component, the modal's content will be a child of the parent component's DOM element.

**Portals**:

Portals allow you to render a component's content into a different DOM element outside of the component's parent hierarchy. This means you can render a component's content at a higher level in the DOM, often directly under the **body** or any other element of your choice.

**Use Cases**:

Portals are particularly useful for scenarios like modals, tooltips, context menus, and any UI element that should appear above all other content on the page. By using a portal, you can ensure that these elements are rendered in the desired location and don't interfere with the CSS or event handling of other components.

Here's a simplified example of how you can use a portal in React:

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

class MyModal extends React.Component {
  render() {
    // Create a portal to render this component's content outside its parent hierarchy
    return ReactDOM.createPortal(
      <div className="modal">
        <h1>Modal Content</h1>
        <p>This modal is rendered outside of its parent component.</p>
      </div>,
      document.getElementById('portal-root') // Specify the target DOM element
    );
  }
}

// In your main application component, render the modal
function App() {
  return (
    <div>
      <h1>My App</h1>
      {/* The portal will render the modal outside of this component's hierarchy */}
      <MyModal />
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));
```

In this example, the **MyModal** component uses **createPortal** to render its content into an element with the id **portal-root**, which can be anywhere in the DOM hierarchy. This allows the modal to appear above all other content on the page, even though it's defined within the **App** component.


---

Original Source: https://www.mindstick.com/forum/160051/explain-the-concept-of-portals-in-react

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.