18. Practical Use Cases of Refs

Activity 18.01: Portable Modals Using Refs

Solution:

1. Add the App base component:

   import React from "react";
   import ReactDOM from "react-dom";
   import "./App.css";
   //omitting the styles for brevity
   class App extends React.Component {
     viewportRef = React.createRef();
     state = {
       showModal: false
     };
     render() {
       return null
     }
   }
   export default App;

2. Add the ModalOverlay and Modal components:

   import React from "react";
   import ReactDOM from "react-dom";
   import "./App.css";
   const Modal = props => {
     return <div className="Modal">{props.children}</div>;
   };
   class ModalOverlay extends React.Component {
     render() {
       const { mountingPoint, showModal, onCloseHandler } = this.props;
       return null;
    ...