🔖 Portals

Portals
SaishJ · Sep 11, 2022 · 89a9384 · 89a9384
1 parent 5f23da7
commit 89a9384
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -215,3 +215,5 @@ export default ClassClick;
 ### [Refs](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/e0b4e20d4af20eea937a3258fd52c0793f5f95d0)
 
 ### [Refs with Class Component](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/6eb606c14741e6397a9a91a0cf0d5cfb20e1163c)
+
+### [Forwarding Refs](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/9a57ffbe3d6eeea400c3604bc66fe6bb6bafabdd)
diff --git a/public/index.html b/public/index.html
@@ -11,5 +11,6 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <div id="portal"></div>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -21,11 +21,13 @@ import RefsDemo from "./components/RefsDemo1";
 import RefDemo2 from "./components/RefDemo2";
 import FocusInput from "./components/FocusInput";
 import FRParentInput from "./components/FRParentInput";
+import PortalDemo from "./components/PortalDemo";
 
 function App() {
   return (
     <div className="App">
-      <FRParentInput />
+      <PortalDemo />
+      {/* <FRParentInput /> */}
       {/* <FocusInput /> */}
       {/* <RefsDemo /> */}
       {/* <RefDemo2 /> */}

diff --git a/src/components/PortalDemo.js b/src/components/PortalDemo.js
@@ -0,0 +1,16 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+function PortalDemo() {
+  return ReactDOM.createPortal(
+    <h1>Portal Demo</h1>,
+    document.getElementById("portal")
+  );
+}
+
+export default PortalDemo;
+
+/*
+Portal:- It is a way to render children into a DOM node that occurs outside the DOM hierarchy
+of the parent component.
+*/
Original file line number	Diff line number	Diff line change
Expand Up		@@ -215,3 +215,5 @@ export default ClassClick;
		### [Refs](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/e0b4e20d4af20eea937a3258fd52c0793f5f95d0)

		### [Refs with Class Component](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/6eb606c14741e6397a9a91a0cf0d5cfb20e1163c)

		### [Forwarding Refs](https://github.com/SaishJ/React-JS-Beginner-to-Advanced/commit/9a57ffbe3d6eeea400c3604bc66fe6bb6bafabdd)