To detect a click outside a React component. More info: https://stackoverflow.com/questions/32553158/detect-click-outside-react-component

detectClickOutisde.js

import ReactDOM from 'react-dom'

// ...

componentDidMount() {
  document.addEventListener('click', this.handleClickOutside, true)
}

componentWillUnmount() {
  document.removeEventListener('click', this.handleClickOutside, true)
}

handleClickOutside = (event) => {
  const domNode = ReactDOM.findDOMNode(this)

  if (!domNode || !domNode.contains(event.target)) {
    this.setState({ visible: false })
  }
}

detectClickOutsideWithRefs.js

import React, { Component } from "react";

class SampleComponent extends Component {
  state = {
    clickedOutside: false
  };

  componentDidMount() {
    document.addEventListener("mousedown", this.handleClickOutside);
  }

  componentWillUnmount() {
    document.removeEventListener("mousedown", this.handleClickOutside);
  }

  myRef = React.createRef();

  handleClickOutside = e => {
    if (!this.myRef.current.contains(e.target)) {
      this.setState({ clickedOutside: true });
    }
  };

  handleClickInside = () => this.setState({ clickedOutside: false });

  render() {
    return (
      <button ref={this.myRef} onClick={this.handleClickInside}>
        {this.state.clickedOutside ? "Bye!" : "Hello!"}
      </button>
    );
  }
}

export default SampleComponent;