How to reset the modal state in reactjs

Question

I have a modal and the input fields are there inside the modal. It has 1st input field called add id. It works like, if that id exists in the backend, i'll get the name and profession in other two input fields. This piece of code is working fine. But each time I open my modal. I want the reset state of the modal, but not the previous state. I am using functional component for this. Not sure how to reset the modal state. Wont be able to share complete code since its complicated, but sharing some code, If anyone can help me. It would be great.

const handleIdValidation = () => {
//handle the code after user enters the id   
  };

<Modal (it contains props to toggle modal and handle submit request)>
    <>
        <TextInput
          type="text"
          name = "id"
          onKeyPress={(event) => {
            if (event.key === "Enter") {
              handleIdValidation();
            }
          }}
          onInput={}
          onChange={(event) => {}} />

          {info &&
            info.map((data) => (
              <>
                <FormGroup>
                  <TextInput
                    id="text-input-1"
                    type="text"
                    value={data.name}
                  />
                </FormGroup>
                <FormGroup>
                  <TextInput
                   
                    id="text-input-2"
                    type="text"
                    value={data.profession}
                    
                  />
                </FormGroup>
              </>
            ))}

</Modal>

Other two input fields will appear on modal if there exist data in info .

Answer 1

what you can do is take a state variable to hide and show Modal. const [isModalOpen,setIsModalOpen]=useState(false) when you click on the div to open modal set setIsModalOpen(true) and render Modal as {isModalOpen&&<Modal />} and in onClose function of Modal do onClose(()=>{setIsMOdalOPen(false)})