modal.jsx

class Modal extends Component {
  modalRef = createRef();

  state = {
    show: false  
  }

  closeModal = (e) => {
    const node = this.modalRef.current;
    if (node && node.contains(e.target)) {
      return;
    }

    this.setState({
      show: false
    })
  };

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

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

  render() {
    const { title, children } = this.props;
    const { show } = this.state;

    return show ? (
      <StyledModalOverlay>
        <StyledModal ref={this.modalRef}>
          <header>{title}</header>
          {children}
        </StyledModal>
      </StyledModalOverlay>
    ) : null;
  }
}