Articles → REACT.JS → Portals In React.Js

Portals In React.Js

In this article, we will discuss portals in react.js.

Purpose

The default behavior of the react application is to put everything in a single root element.

Picture showing the default rendered HTML when everything is included in the root element

Click to Enlarge

But sometimes, you require to move some components outside the root element. For that, portals are used in react.js.

Example

In this example, we will perform the following changes: -

Create a new node in index.html
Create a component
Use the portal to render the component
Output

Let us work on each step.

Create A New Node In Index.Html

In the index.html file of the public folder, add a new node.

Picture showing creating a new child div above the root div

Click to Enlarge

Create A Component

In the src folder, add a new file gyan.js. In the file, add the following contents.

import React, { Component } from 'react';
import ReactDOM from 'react-dom'




class ChildComponent extends React.Component {
    render() {
        return <h2>This is child component</h2>;
    }
}

export default ChildComponent

Use Portal To Render The Component

In the index.js, write the following code.

import React from 'react';
import ReactDOM from 'react-dom'
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
import ChildComponent from './gyan.js';




const Home = () => {    


    return (
        <React.Fragment>
            {ReactDOM.createPortal(<ChildComponent/>, document.getElementById('child'))}            
            <button>
                Sample Click Me Button</button>

        </React.Fragment>
    );
}
ReactDOM.render(<Home />, document.getElementById("root"));

In the above code, the createPortal method creates the portal.

Output

Save and run the code. Here is the rendered HTML.

Click to Enlarge

Posted By -	Karan Gupta

Posted On -	Thursday, October 28, 2021

Query/Feedback

Your Email Id		**

Subject		*

Query/Feedback	Characters remaining 250	**