Display HTML element outside of the root element in React Js | What is portal in React Js and how to use it

In this blog post, I will explain about the react portal, you must be thinking about what is this react portal, well react portal we use to display any text or HTML element outside the root element.

As we know all the react Js user interface parts render inside a div with root id, but what if we don’t want our new HTML element to be displayed inside the root element.

There can be many use cases for this, for example in the case of modals or popups, these elements overlay the parent elements and that is not a proper way to align HTML elements.

So it’s better to separate these from the parent root element, let’s understand this through the code.

First of all, you have to create a div with some id inside the index.html file which you can find inside the public folder. here you will see a div with root id, which is basically the parent div for rendering react application.

Here I am creating a div with an id called “other-div“.

    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="other-div"></div>
    <div id="root"></div>

Now inside the App.js file, we will import ReactDom for handling elements, and this ReactDom has a function called createPortal which helps to assign HTML elements to other div elements outside of the root element.

Here is the complete code where we are using ReactDome.createPortal function to assign <OtherDiv /> component value to division with id “other-div”.

import './App.css';
import ReactDom from 'react-dom';
function App() {
  const OtherDiv =()=>{
    return <h2>Hello, text is displaying inside other div</h2>
  return (
    {ReactDom.createPortal(<OtherDiv />,document.getElementById('other-div'))}

export default App;

OtherDiv is a method which is returning a text message.

Let’s check the output for this code.

In the above image, you can see the output text is coming inside the other-div element, not inside the root div, so you can use createPortal for this.

Related Posts

angular vs react-min

What is the difference between Angular & React JS, Which one you should choose?

Angular & React JS both are use for Frontend Development, To make Single page applications or Web Apps. Here is a quick difference between both of them….

react js icon

What is Redux? What is action, reducer and store in Redux

In this blog we will discus about the redux, what is Redux and how you can use it in React application. What is Redux? Redux is a…

react js icon

What is useEffect Hook? How to Fetch data from API using useEffect

useEffect hook is used to manage side effects that are not related to component rendering. Mostly useEffect hook is used for managing console logs, animations, loading data,…

react js icon

What is useReducer Hook? What is the difference between useState and useReducer Hooks?

useReudcer hook takes the current state and returns a new state, it is used for state management. With useReducer, we can directly call the function inside the…

react js icon

Creating React JS App without using npx create-react-app command

It’s easy to create a react application by just running npx create-react-app project_name command, do you know what are the basic requirements for creating a react application…

react js icon

What is the useState() hooks in React JS | How to use useState() hook in React JS

Hooks are very important in react js and the most common hook is the useState Hook. In this blog, we will look into the functionality of this…

Leave a Reply

Your email address will not be published. Required fields are marked *