score:1

Accepted answer

to close a modal when you click outside, you have to modify your modals component. first you create a ref at the beginning:

modalref = react.createref();

then you use that ref in the render function:

return (
  <div ref={this.modalref}...

you listen to mousedown events during the lifetime of your modal component:

componentdidmount() {
    document.addeventlistener("mousedown", this.handlemousedown);
}

componentwillunmount() {
    document.removeeventlistener("mousedown", this.handlemousedown);
}

and you test if the click was outside of the ref in the handler:

// mouse click event, if outside of the popup then close it
handlemousedown= (event) => {
    if (!this.modalref.current.contains(event.target)) {
      // notify the parent with a callback to hide the modal
    };
}

Related Query

More Query from same tag