react-bootstrap4-modal | A very simple Bootstrap 4 modal dialog component for React | Frontend Framework library

This is a z-index stacking issue and was a common problem until React introduced portals. Dan Abrimov from the FB team put together a code pen with an example that can be found here.

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

A typical use case for portals is when a parent component has an overflow: hidden or z-index style, but you need the child to visually “break out” of its container. For example, dialogs, hovercards, and tooltips.

Normally, when you return an element from a component’s render method, it’s mounted into the DOM as a child of the nearest parent node: