title: How to Unmount React Functional Component?
body: <p>I've built several modals as React functional components.  They were shown/hidden via an <code>isModalOpen</code> boolean property in the modal's associated Context.  This has worked great.</p>
  
  <p>Now, for various reasons, a colleague needs me to refactor this code and instead control the visibility of the modal at one level higher.  Here's some sample code:</p>
  
  <pre><code>import React, { useState } from 'react';
  import Button from 'react-bootstrap/Button';
  import { UsersProvider } from '../../../contexts/UsersContext';
  import AddUsers from './AddUsers';
  
  const AddUsersLauncher = () =&gt; {
    const [showModal, setShowModal] = useState(false);
  
    return (
      &lt;div&gt;
        &lt;UsersProvider&gt;
          &lt;Button onClick={() =&gt; setShowModal(true)}&gt;Add Users&lt;/Button&gt;
          {showModal &amp;&amp; &lt;AddUsers /&gt;}
        &lt;/UsersProvider&gt;
      &lt;/div&gt;
    );
  };
  
  export default AddUsersLauncher;
  </code></pre>
  
  <p>This all works great initially.  A button is rendered and when that button is pressed then the modal is shown.</p>
  
  <p>The problem lies with how to hide it.  Before I was just setting <code>isModalOpen</code> to false in the reducer.</p>
  
  <p>When I had a quick conversation with my colleague earlier today, he said that the code above would work and I wouldn't have to pass anything into <code>AddUsers</code>.  I'm thinking though that I need to pass the <code>setShowModal</code> function into the component as it could then be called to hide the modal.</p>
  
  <p>But I'm open to the possibility that I'm not seeing a much simpler way to do this.  Might there be? </p>