The Startup
Published in

The Startup

Everything You Need to Know About React Portals

Learn all about React portals and how to use them

  • Dialogs
  • Modals
  • Tooltips
Photo by Christian Wiediger on Unsplash
render() {
// React mounts a new div and renders the children into it
return (
<div> {this.props.children}
</div> );
}
render() {
// React does *not* create a new div. It renders the children into `domNode`.
// `domNode` is any valid DOM node, regardless of its location in the DOM.
return ReactDOM.createPortal(
this.props.children,
domNode
);
}
const Modal =({ title, isOpen, onClose, children })=> {
if (!isOpen) return null
return ReactDOM.createPortal(
<div>
<h2>{title}</h2>
<button onClick={onClose}>Close</button>
</div>,
domNode) // The domNode is a reference to somewhere in a root component
}

Things to keep in mind

Conclusion

Keep in Touch

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Caelin Sutch

Founder, engineer, designer. Passionate about building cool shit.