title: react Portal - how to close modal when clicking outside of modal and how to assign ref to modal inside parent component rendering modal?
body: <p>I am using react portal and want to make it possible that modal closes when user clicks outside of modal. I am creating a ref inside my parent,but cannot really assign it to the modal itself as react portals arent actual DOM nodes (as I understood). I can also not wrap around this.props.children inside a div and assign it a ref inside my Modal component also, because then I cannot access and use it inside my Parent component.
  What can I do? Thanks!</p>
  
  <p>my modal:</p>
  
  <pre><code>import React from 'react';
  import { createPortal } from 'react-dom';
  const modalRoot = document.getElementById( 'modal' );
  class Modal extends React.Component {
  
      constructor( props ) {
          super( props );
          this.element = document.createElement( 'div' );
      }
      componentDidMount() {
          modalRoot.appendChild( this.element );
      }
      componentWillUnmount() {
          modalRoot.removeChild( this.element );
      }
      render() {
          return createPortal(this.props.children, document.querySelector('#modal'));
      }
  }
  </code></pre>
  
  <p>the parent component rendering modal:</p>
  
  <pre><code>class Parent extends React.Component {
      constructor (props) {
          super(props);
          this.state = {
              showModal: false
          };
          this.modal=React.createRef();
      }
  
      showModal = () =&gt; {
          this.setState({
              showModal: !this.state.showModal
          })
      };
  
      closeModal = (e) =&gt; {
          if (this.modal.current.contains(e.target)) {
              return;
          } else {
              this.showModal()
          }
      }
      componentDidMount () {
          document.addEventListener('click', this.closeModal, false)
      }
  
      componentWillUnmount() {
          document.removeEventListener('click', this.closeModal, false)
      }
  
      render () {
          const {src, height, width} = this.props;
          return (
              &lt;React.Fragment&gt;
                  &lt;img
                      className="image"
                      src={src}
                      onClick={this.showModal}
                  /&gt;
                  {
                      this.state.showModal ? (
                              &lt;Modal&gt;
                                  &lt;div className="my-modal"&gt;
                                      &lt;h1 &gt;Heading&lt;/h1&gt;
                                      &lt;p&gt;Lorem ipsum &lt;/p&gt;
                                      &lt;button
                                          className="modal-close"
                                          onClick={this.showModal}
                                      &gt;X
                                      &lt;/button&gt;
                                  &lt;/div&gt;
                              &lt;/Modal&gt;
                      ) : null
                  }
  
              &lt;/React.Fragment&gt;
          )
      }
  };
  </code></pre>