# 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

{% embed url="https://reactjs.bootcss.com/docs/portals.html" %}

### Steps

* Edit index.html by adding element&#x20;

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

* Add portal in the component

```typescript
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"));
}
```
