effect.js

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';

const EventSalesReport = props => {
  const [open, setOpen] = useState(false);
  const [count, setCount] = useState(0);

  console.log(`render: open is ${open}`);

  const handleDocumentClick = function(event) {
    if (event.target.closest('.report')) return;
    console.log('closing from handleDocumentClick');

    // this will trigger the useEffect cleanup and unbind the event listener
    setOpen(false);
  };

  const onItemClick = event => {
    event.preventDefault();
    event.stopPropagation();
    console.log('onItemClick');
    setCount(count + 1);
  };

  // this will be called whenever "open" changes
  useEffect(() => {
    if (open) {
      console.log('adding addEventListener');
      document.addEventListener('click', handleDocumentClick);
    }

    // this will be called whenever "open" changes except for the first time, when open becomes true
    return () => {
      console.log('removing addEventListener in UNMOUNT');
      document.removeEventListener('click', handleDocumentClick);
    };
  }, [open]);

  const details = open ? (
    <ul className="options">
      <li onClick={onItemClick}>item 1</li>
      <li onClick={onItemClick}>item 2</li>
    </ul>
  ) : (
    false
  );

  return (
    <div className="report" onClick={() => setOpen(!open)}>
      Hi {props.name} :)
      <br />
      {count}
      {details}
    </div>
  );
};

EventSalesReport.propTypes = {
  name: PropTypes.string.isRequired
};

export default EventSalesReport;