React Portal

Introduction

  • Used to add the component from the outside of root element instead added inside the component

  • Mainly used to do the model popup, dialog, etc

https://reactjs.bootcss.com/docs/portals.htmlreactjs.bootcss.com

Steps

  • Edit index.html by adding element 

<html>
  <body>
    <div id="root"></div>
    <div id="modal-root"></div>
  </body>
</html>

  • Add portal in the component

import import React,{ lazy, Suspense} from 'react';
import ReactDOM from 'react-dom';
import Backdrop from "./backdrop";

const ErrorModal = () => {
   return ReactDOM.createPortal(<Backdrop/>, document.getElementById("modal-root"));
}
PreviousReact Lazy & SuspenseNextError Boundary

Last updated

Was this helpful?