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

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 & Suspense NextError Boundary

Last updated 6 months ago

Was this helpful?