title: React JS - Reset Form Data after Modal Close
body: <p>I'm trying to reset my form data when a modal closes. I think part of my problem is that the form data <code>&lt;Mint&gt;</code> is in another component.</p>
  <p>Honestly, any time the modal is shown or hidden I would like to reset the data.
  So if there is a way I can reset the form data inside the <code>toggleModalOne()</code> function that would be awesome, but I can't figure out how.</p>
  <p>Any advice is greatly appreciated.</p>
  <pre><code>// BuyIt.jsx
  
  import React, { useState } from &quot;react&quot;;
  import TextLoop from &quot;react-text-loop&quot;;
  import Modal from &quot;react-modal&quot;;
  import Mint from &quot;../../components/slider/mint.js&quot;;
  
  const BuyIt = () =&gt; {
     const [isOpen, setIsOpen] = useState(false);
  
    function toggleModalOne() {
      setIsOpen(!isOpen);
    }
  
    return (
       &lt;div className=&quot;div-buyNowBtn&quot;&gt;            
              &lt;button id=&quot;buyNowBtn&quot; className=&quot;white-fill-bg btn-outline btn-lg&quot; onClick={toggleModalOne}&gt;
                Buy Now
              &lt;/button&gt;
            &lt;/div&gt;
        
       &lt;Modal
           isOpen={isOpen}
           onRequestClose={toggleModalOne}
           contentLabel=&quot;My dialog&quot;
           className=&quot;custom-modal&quot;
           overlayClassName=&quot;custom-overlay&quot;
           closeTimeoutMS={500}
        &gt;
           &lt;Mint/&gt;
        &lt;/Modal&gt;
  
    );
  }
  
  </code></pre>