From 89a9384c40963c77ec47ac76cbd8699ee1bebe4d Mon Sep 17 00:00:00 2001 From: SaishJ Date: Sun, 11 Sep 2022 16:22:56 +0530 Subject: [PATCH] :bookmark: Portals Portals --- README.md | 2 ++ public/index.html | 1 + src/App.js | 4 +++- src/components/PortalDemo.js | 16 ++++++++++++++++ 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 src/components/PortalDemo.js diff --git a/README.md b/README.md index 4e716df..2e501c6 100644 --- 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 index cb7d2ea..32f4ab0 100644 --- a/public/index.html +++ b/public/index.html @@ -11,5 +11,6 @@
+
diff --git a/src/App.js b/src/App.js index 1e044a6..04aad56 100644 --- 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 (
- + + {/* */} {/* */} {/* */} {/* */} diff --git a/src/components/PortalDemo.js b/src/components/PortalDemo.js new file mode 100644 index 0000000..8ea6c2c --- /dev/null +++ b/src/components/PortalDemo.js @@ -0,0 +1,16 @@ +import React from "react"; +import ReactDOM from "react-dom"; + +function PortalDemo() { + return ReactDOM.createPortal( +

Portal Demo

, + 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. +*/