title: How to call two arrow functions onclick ReactJS
body: <p>I've seen a lot of threads about calling multiple traditionally declared functions in React onclick, but I'm confused how I could implement that with arrow functions. I have a function called handleClose, which closes a Material UI menu:</p>
  <pre><code>const [open, setOpen] = React.useState(false);
  const anchorRef = React.useRef(null);
  const handleClose = (event) =&gt; {
      if (anchorRef.current &amp;&amp; anchorRef.current.contains(event.target)) {
        return;
      }
      setOpen(false);
    };
  </code></pre>
  <p>And I have a function called handleModalOpen, which open a Material UI Modal:</p>
  <pre><code>const [modalOpen, setModalOpen] = React.useState(false);
  const handleModalOpen = () =&gt; {
    setModalOpen(true);
  };
  </code></pre>
  <p>When I click this menu item, I would like both functions to run. Both functions individually work fine on their own. So how would I achieve this? (Currently I only have it set so the modal opens)</p>
  <pre><code>&lt;MenuItem onClick={handleModalOpen}&gt;Add Album&lt;/MenuItem&gt;
  </code></pre>
  <p>Basically I have a button that triggers a menu, and then clicking one of those menu options should trigger a modal whilst closing the menu. Also, this is a functional component.</p>