Member-only story
Easy-to-follow tech tutorials
React Basics (Part 2) — React Portals
Learning React Portals with a Modal
Okay so we’ll continue from our previous React Basics (Part 1) article and go through this article with this repository — link.
Navigate to the ReactPortalPage and we’ll demo how to build two kinds of modals on that page — one with React Portals and one without. We’ll take a look at the difference between the two so we can better understand the role that React Portals play.
Let’s get started!
This is what we’re gonna use to demonstrate how portals work in the context of react modals:
We’re gonna have two sections with two “Click Me To Open Modal” buttons that brings up two modals (that’s a lot of twos). The first modal that opens with the first (top) button will be built without using react-portals and the second modal that opens up with the second (bottom) button will be built with react-portals.
The goal here is to try to see what advantage react-portals can bring us and/or what problem(s) it can solve.
