Quick Contact


    React Portals

    If you want to write element inside another element so this all is called as ‘React Portal’. So, make a component and write react portal code. Suppose we want write inside ‘other root component’ as a sub data so it is written as-:

    		Import React, {Component} from ‘react’;
    		Import ReactDOM from ‘react-dom’
    		Class Other extends Component {
    		    Render() {
    		       Return reactDOM.createPortal(
    		                < h1>OtherPortal< /h1>
    		                   Document.getElementById(‘other-root’)
    		)
    		}
    		}
    		Export default other;
    	

    So, here other root element is written in different div not in react portal div, which is good to avoid component confusions using react portal

    For Example-:

    When we want to render component which may be completely separate from the original component such as tooltips, modal etc. It breaks the UI parent div.

    So, portals provide first-class way to render children into DOM node that exits outside the DOM hierarchy of parent component still it can use all functionalities of main DOM.

    As suppose you have react element which is written under root element. If you want to use which is not written in root so it can be done by using different portals. This can be done by creating different components and call that component file by using return.

    Copyright 1999- Ducat Creative, All rights reserved.