{"id":5808,"date":"2020-01-31T13:57:40","date_gmt":"2020-01-31T08:27:40","guid":{"rendered":"https:\/\/www.innovationm.com\/blog\/?p=5808"},"modified":"2026-01-14T11:55:14","modified_gmt":"2026-01-14T06:25:14","slug":"working-of-react-portals","status":"publish","type":"post","link":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/","title":{"rendered":"Working of React Portals"},"content":{"rendered":"<p>ReactJS is one of the most powerful Javascript frameworks out there. It has a lot of small features that help build amazing user interfaces. React Portals is one such feature. They were introduced in version 16.0 of React.<\/p>\n<p>React Portals are the child elements that won&#8217;t stay with the parent root node. The use cases of React Portals include tooltips, chat widgets, dialogs, modals and anything that needs to be rendered outside of the root component. It is beneficial when the parent component has &#8216;overflow: hidden&#8217; or &#8216;z-index&#8217; styling.<\/p>\n<p>If you have visited the music-streaming websites and observed that music player continues to be visible even though webpages are changed on the website, it means &#8216;React Portals&#8217; are used behind the scenes.<\/p>\n<p>No matter portals are anywhere in the DOM tree, they still behave like a normal React child. React version 16.0 or higher support React Portals. The syntax for using React Portals is as follows:<\/p>\n<pre class=\"lang:js decode:true\">React.createPortal(child,container)\r\n<\/pre>\n<p>Here, &#8216;child&#8217; can be any renderable React child-like string, element and &#8216;container&#8217; is a DOM element.<\/p>\n<p>Let&#8217;s see the implementation of the React Portals in the below example. There is an &#8216;index.js&#8217; file in the public folder.<\/p>\n<pre class=\"lang:js decode:true \">index.html\r\n\r\n&lt;!DOCTYPE html&gt;\r\n&lt;html lang='en'&gt;\r\n&lt;head&gt;\r\n&lt;meta charset =\"utf-8\"&gt;\r\n&lt;meta name = \"viewport\" content = \"width=device-width, initial-scale=1\"&gt;\r\n&lt;link rel = \"manifest\" href = \"%PUBLIC_URL%\/manifest.json\"&gt;\r\n&lt;title&gt;Working of ReactJS Portals&lt;\/title&gt;\r\n&lt;\/head&gt;\r\n&lt;body&gt;\r\n&lt;div id = \"myPortal\"&gt;\r\n\/\/ In this div portal will be rendered\r\n&lt;\/div&gt;\r\n&lt;div id = \"root&gt;\r\n&lt;\/div&gt;\r\n&lt;\/body&gt;\r\n&lt;\/html&gt;<\/pre>\n<p>In the above &#8216;index.js&#8217; file, you can see the &#8216;div tag&#8217; used for &#8216;portal&#8217; is separate from the main &#8216;root div&#8217;.<\/p>\n<p>Now, there is another file &#8216;AudioPlayer.js&#8217; under the src folder. This file will act like a child component to be rendered in the &#8216;portal&#8217; div. This is done to show the AudioPlayer component on each page of the website when the user clicks on the play button in the music section.<\/p>\n<pre class=\"lang:js decode:true \">AudioPlayer.js\r\n\r\nimport React, {Component} from 'react';\r\nimport ReactDOM from 'react-dom';\r\nclass AudioPlayer extends Component {\r\nrender(){\r\nreturn ReactDOM.createPortal(\r\n&lt;div className = \"myPortal\"&gt;\r\n&lt;p&gt; This is the audio player component to be visible on the screen.&lt;\/p&gt;\r\n&lt;\/div&gt;,\r\ndocument.getElementById('myPortal')\r\n);\r\n}\r\n}\r\nexport default AudioPlayer;<\/pre>\n<p>You can see ReactDOM.createPortal is used to get two parameters, first one is the node component to be rendered in the portal div and the second param is the reference to the portal div in &#8216;index.js&#8217;.<\/p>\n<p>Now, let&#8217;s move to the final &#8216;index.js&#8217; file to see the working of React Portals along with other React Components.<\/p>\n<pre class=\"lang:js decode:true\">index.js\r\n\r\nimport React, {Component} from 'react;\r\nimport ReactDOM from 'react-dom';\r\nimport registerServiceWorker from '.\/registerServiceWorker';\r\nimport {BrowserRouter, Switch, Router} from 'react-router-dom';\r\nimport FirstPage from '.\/FirstPage';\r\nimport SecondPage from '.\/SecondPage';\r\nimport AudioPlayer from '.\/AudioPlayer';\r\nimport '.\/index.css';\r\nclass App extends Component {\r\nrender(){\r\nreturn(\r\n&lt;div&gt;\r\n&lt;AudioPlayer\/&gt;\r\n&lt;BrowserRouter&gt;\r\n&lt;Switch&gt;\r\n&lt;Route exact path = '\/' component = {FirstPage}\/&gt;\r\n&lt;Route path = '\/pgTwo' component = {SecondPage}\/&gt;\r\n&lt;\/Switch&gt;\r\n&lt;\/BrowserRouter&gt;\r\n&lt;\/div&gt;\r\n);\r\n}\r\n}\r\nReactDOM.render(&lt;App\/&gt;, document.getElementById('root'));\r\nserviceWorker.unregister();<\/pre>\n<p><strong>Conclusion:\u00a0<\/strong><\/p>\n<ul>\n<li>Portals are the React way to render children outside of the root node.<\/li>\n<li>Components rendered through Portals still remain in React&#8217;s control.<\/li>\n<li>They only affect the DOM structure but not the overall React tree.<\/li>\n<\/ul>\n<p>You can read more blogs on React.<\/p>\n<p><strong>1:\u00a0React vs Angular: Let\u2019s See Who Wins?<\/strong><br \/>\n<strong>2:\u00a0Understanding Of React Fiber Architecture<\/strong><br \/>\n<strong>3:\u00a0React \u2013 Let\u2019s \u201cHook\u201d up<\/strong><\/p>\n<p>InnovationM is a globally renowned\u00a0Mobile app development company in India\u00a0that caters to a strong &amp; secure Android app development, iOS app development, hybrid app development services. Our commitment &amp; engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively which makes us the best\u00a0iOS app development company in India.<\/p>\n<p>That\u2019s all for this post. Hope you enjoyed learning. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>ReactJS is one of the most powerful Javascript frameworks out there. It has a lot of small features that help build amazing user interfaces. React Portals is one such feature. They were introduced in version 16.0 of React. React Portals are the child elements that won&#8217;t stay with the parent root node. The use cases [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":5809,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[257],"tags":[],"class_list":["post-5808","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-react"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.4 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Working of React Portals - InnovationM - Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Working of React Portals - InnovationM - Blog\" \/>\n<meta property=\"og:description\" content=\"ReactJS is one of the most powerful Javascript frameworks out there. It has a lot of small features that help build amazing user interfaces. React Portals is one such feature. They were introduced in version 16.0 of React. React Portals are the child elements that won&#8217;t stay with the parent root node. The use cases [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/\" \/>\n<meta property=\"og:site_name\" content=\"InnovationM - Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-01-31T08:27:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-01-14T06:25:14+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1145\" \/>\n\t<meta property=\"og:image:height\" content=\"636\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"InnovationM Admin\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"InnovationM Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/\"},\"author\":{\"name\":\"InnovationM Admin\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"headline\":\"Working of React Portals\",\"datePublished\":\"2020-01-31T08:27:40+00:00\",\"dateModified\":\"2026-01-14T06:25:14+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/\"},\"wordCount\":466,\"commentCount\":1,\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/working-of-react-portals.png\",\"articleSection\":[\"React\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/\",\"name\":\"Working of React Portals - InnovationM - Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/working-of-react-portals.png\",\"datePublished\":\"2020-01-31T08:27:40+00:00\",\"dateModified\":\"2026-01-14T06:25:14+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/working-of-react-portals.png\",\"contentUrl\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/wp-content\\\/uploads\\\/2020\\\/01\\\/working-of-react-portals.png\",\"width\":1145,\"height\":636},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/working-of-react-portals\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Working of React Portals\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/\",\"name\":\"InnovationM - Blog\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/#\\\/schema\\\/person\\\/a831bf4602d69d1fa452e3de0c8862ed\",\"name\":\"InnovationM Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g\",\"caption\":\"InnovationM Admin\"},\"sameAs\":[\"http:\\\/\\\/www.innovationm.com\\\/\"],\"url\":\"https:\\\/\\\/www.innovationm.com\\\/blog\\\/author\\\/innovationmadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Working of React Portals - InnovationM - Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/","og_locale":"en_US","og_type":"article","og_title":"Working of React Portals - InnovationM - Blog","og_description":"ReactJS is one of the most powerful Javascript frameworks out there. It has a lot of small features that help build amazing user interfaces. React Portals is one such feature. They were introduced in version 16.0 of React. React Portals are the child elements that won&#8217;t stay with the parent root node. The use cases [&hellip;]","og_url":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/","og_site_name":"InnovationM - Blog","article_published_time":"2020-01-31T08:27:40+00:00","article_modified_time":"2026-01-14T06:25:14+00:00","og_image":[{"width":1145,"height":636,"url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png","type":"image\/png"}],"author":"InnovationM Admin","twitter_misc":{"Written by":"InnovationM Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#article","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/"},"author":{"name":"InnovationM Admin","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"headline":"Working of React Portals","datePublished":"2020-01-31T08:27:40+00:00","dateModified":"2026-01-14T06:25:14+00:00","mainEntityOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/"},"wordCount":466,"commentCount":1,"image":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png","articleSection":["React"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/","url":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/","name":"Working of React Portals - InnovationM - Blog","isPartOf":{"@id":"https:\/\/www.innovationm.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#primaryimage"},"image":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#primaryimage"},"thumbnailUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png","datePublished":"2020-01-31T08:27:40+00:00","dateModified":"2026-01-14T06:25:14+00:00","author":{"@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed"},"breadcrumb":{"@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#primaryimage","url":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png","contentUrl":"https:\/\/www.innovationm.com\/blog\/wp-content\/uploads\/2020\/01\/working-of-react-portals.png","width":1145,"height":636},{"@type":"BreadcrumbList","@id":"https:\/\/www.innovationm.com\/blog\/working-of-react-portals\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.innovationm.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Working of React Portals"}]},{"@type":"WebSite","@id":"https:\/\/www.innovationm.com\/blog\/#website","url":"https:\/\/www.innovationm.com\/blog\/","name":"InnovationM - Blog","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.innovationm.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.innovationm.com\/blog\/#\/schema\/person\/a831bf4602d69d1fa452e3de0c8862ed","name":"InnovationM Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/5c99d9eece9dfbc82297cf34ddd58e9fe05bb52fe66c8f6bf6c0a45bfb6d7629?s=96&r=g","caption":"InnovationM Admin"},"sameAs":["http:\/\/www.innovationm.com\/"],"url":"https:\/\/www.innovationm.com\/blog\/author\/innovationmadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5808","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/comments?post=5808"}],"version-history":[{"count":1,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5808\/revisions"}],"predecessor-version":[{"id":8931,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/posts\/5808\/revisions\/8931"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media\/5809"}],"wp:attachment":[{"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/media?parent=5808"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/categories?post=5808"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.innovationm.com\/blog\/wp-json\/wp\/v2\/tags?post=5808"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}