/*
- Portals provide a first-class way to render children into a DOM node that
exists outside the DOM hierarchy of the parent component.
- Creates a Portal and renders content in the provided container(DOM Node) outside
the default hierarchy.
- It’s important to note that the createPortal() function will not create the
containerElement for us, we have to explicit do that in our "index.html" file
E.g <div id="react-modal"></div>
- Creating a Portal accepts two parameter
content: any valid renderable React element
containerElement: a valid DOM element to which we can append the content
E.g ReactDOM.createPortal(content, containerElement);
*/
import { createPortal } from 'react-dom';
function Modal() {
return createPortal(<section>
<p>This is an example or React Portal</p>
</section>,
document.getElementById("react-modal"));
}
export default Modal;
// With love @kouqhar// modal file s an example
import React from 'react';
import ReactDOM from 'react-dom';
// create modal and use a portal to mount it in a specific DOM point
const Modal = (props) => {
return (
<React.Fragment>
{ReactDOM.createPortal(
<div>This is the modal</div>,
document.getElementById('modal-root'),
)}
</React.Fragment>
)
}
export default Modal;
// public html doc to define where the is the portal's destination
// in this case "modal-root"
<body>
<div id="root"></div>
<div id="modal-root"></div>
</body>// REACT
// createPortal lets you render some children into a different part of the DOM.
// the most notable/common entry point of react and JSX is <div id="root><div>
// with createPortal you can add a different dom Node to the index.html, target/select it and
// add inject a JSX/Html content to it.
//
import { createPortal } from 'react-dom';
function MyComponent() {
return (
<div style={{ border: '2px solid black' }}>
<p>This child is placed in the parent div.</p>
{createPortal(
<p>This child is placed in the document body.</p>,
document.body
)}
</div>
);
}