React JS - Reset Form Data after Modal Close

Question

I'm trying to reset my form data when a modal closes. I think part of my problem is that the form data <Mint> is in another component.

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 toggleModalOne() function that would be awesome, but I can't figure out how.

Any advice is greatly appreciated.

// BuyIt.jsx

import React, { useState } from "react";
import TextLoop from "react-text-loop";
import Modal from "react-modal";
import Mint from "../../components/slider/mint.js";

const BuyIt = () => {
   const [isOpen, setIsOpen] = useState(false);

  function toggleModalOne() {
    setIsOpen(!isOpen);
  }

  return (
     <div className="div-buyNowBtn">            
            <button id="buyNowBtn" className="white-fill-bg btn-outline btn-lg" onClick={toggleModalOne}>
              Buy Now
            </button>
          </div>
      
     <Modal
         isOpen={isOpen}
         onRequestClose={toggleModalOne}
         contentLabel="My dialog"
         className="custom-modal"
         overlayClassName="custom-overlay"
         closeTimeoutMS={500}
      >
         <Mint/>
      </Modal>

  );
}

Answer 1

You could wrap your Modal around a check to see if isOpen is true. This will make the whole modal re-render each time rather than just hiding and showing it but it still being in the DOM (which is what I am assuming is happening).

{ isOpen && 
     <Modal
         isOpen={isOpen}
         onRequestClose={toggleModalOne}
         contentLabel="My dialog"
         className="custom-modal"
         overlayClassName="custom-overlay"
         closeTimeoutMS={500}
      >
         <Mint></Mint>
      </Modal>
}

Answer 2

If you want a parent function to reset a child's form state, you probably will want to lift the state up to the parent and pass it down as a prop.