Introduction
Learn how React Portals allow you to render components outside their parent DOM nodes without losing access to the component's props and state. This lesson helps you understand the basics of Portals, enabling you to implement overlays and other UI elements effectively while maintaining the component context.
We'll cover the following...
What are portals?
Portals allow us to render components in DOM nodes that are outside of the parent node of the current component hierarchy but still have access to the current component environment.
A typical example is an overlay rendered in its own <div> outside of the actual application.
The portal remains in the context of the component that has created it and therefore has access to all data available to the parent component, such as its props and state.
However, they are placed in entirely different locations in the rendered HTML compared to the rest of the application. Being able to access props and state is crucial for portals, because they allow us to access common contexts such as translations.