How to correctly handle a click outside of a component in react js?

Question

JavaScript

Current code:

componentWillMount() {
    document.addEventListener('click', this.onClickOuterModal, false);
  }

  componentWillUnmount() {
    document.removeEventListener('click', this.onClickOuterModal, false);
  }

  onClickOuterModal = (event) => {
    const modal = document.getElementsByClassName('modal');
    if (modal !== event.target) {
      this.props.closeModal();
    }
  };

1. Can it be processed somehow more elegantly and should it be done?
2. How to make the check also on click on the child elements of the component? (now on a click inside the modal window it closes - it shouldn't).

Answer 1

if (!modal.contains(event.target)) {
  this.props.closeModal();
}

Element in a good way to receive through ref.

Answer 2

need to use portals