title: Passing useState Hook into another function on React
body: <p>I want to pass in a boolean value in a useState hook that opens and closes a modal on click between two functions. However, I keep getting this error message: <code>Cannot destructure property 'setOpenModal' of 'props' as it is undefined.</code></p>
  <p>Main.js</p>
  <pre><code>import React, { useState, useEffect } from &quot;react&quot;;    
  import * as Materials from &quot;../components/Materials&quot;; // &lt;- Material.js
  
  const Main = () =&gt; {
  
      const [openModal, setOpenModal] = useState(false); //&lt;- Opens (True) and Closes (False) Modal
      const { MaterialContainer } = Materials.MaterialTable(); // &lt;-Calling Function Under MaterialTable
  
  return (
  
      &lt;MaterialContainer 
        openModal={openModal}
        setOpenModal={setOpenModal}
      /&gt; 
      // This is how I am passing in Open/Close useState.
  }
  </code></pre>
  <p>Material.js</p>
  <pre><code>export const MaterialTable = (props) =&gt; {
  
    const { openModal, setOpenModal } = props; // &lt;- Pointed in Error Message.
  
    const openMaterialModal = (item) =&gt; {
      console.log(&quot;Button Clicked&quot;);
      setOpenModal(true); // &lt;- Where I am passing in a true statement.
    };
  
    const MaterialContainer = () =&gt; (
      &lt;&gt;
          &lt;Table&gt;Stuff&lt;/Table&gt;
      &lt;/&gt;
    );
    return {
      MaterialContainer
    }
  }
  </code></pre>
  <p>Thanks in advance.</p>