Have you ever wanted to render a React component in a totally different part of your app? In this article, I will show you how to do that while still having control of it within the first component.

If you look at the example below we have a PortalIn component that will take whatever is passed into it and render it out where the PortalOut component is. To make this work, the two React components need to have the same portalType (I’m using headerPortal for the identifier)_. _They also need to be wrapped within the PortalProvider.

#javascript #react #nextjs #web-development