Getting a cleaner DOM with Portals
Step 1
Got inside public/index.html and add
the roots near the
<div id="backdrop-root"></div>
<div id="overlay-root"></div>
Step 2
Then import MyReactDOM from 'react-dom'
Fell free to name anything you want. I named it MyReactDOM in this example
import MyReactDOM from 'react-dom'
Step 3
Create methods that returns jsx to be used
const Backdrop = (props) => {
return (<div onClick={props.onConfirm} />)
}
const ModelOverLay = (props) =>{
return (
<Card>
<header>
<h2> Invalid Input</h2>
</header>
<div>
<p> The input is invalid </p>
</div>
<footer>
<Button onClick={props.onConfirm}>Okay</Button>
</footer>
</Card>
)
}
Step 4
Put the two methods your exported component
syntax:
ReactDOM.createPortal(child, container)
const ErrorModal = (props) => {
return (
<React.Fragment>
{MyReactDOM.createPortal(
<Backdrop onConfirm={props.onConfirm}/>,
document.getElementById('backdrop-root'))}
{MyReactDOM.createPortal(
<ModelOverLay onConfirm={props.onConfirm}/>,
document.getElementById('overlay-root'))}
</React.Fragment>
);
};
export default ErrorModal;
Top comments (0)