# React Portal Basics

> An introduction to React Portals.

- Canonical: https://dennisokeeffe.com/blog/2018-12-22-react-portal-basics
- Published: 2018-12-22
- Updated: 2018-12-22

## Why Portals?

A great use case for portals is for use with things like React modals. Anything that uses a stack context can obscure the css position for something like a modal.

The tl;dr is to make a React component a descendent of a HTML element other than `id="root"`;

## Creating a Portal

```javascript
import React from "react";
import ReactDOM from "react-dom";

const Modal = (props) => {
  return ReactDOM.createPortal(
    <div className="modal">
      <div className="modal-body" />
    </div>,
    document.querySelector("#modal")
  );
};
```