How to reset the Modal input states after clicking the modal close button in React?

Question

After giving the input of mobile number when i close the modal, then again after clicking the Form Submit button, input box shows the previously entered number. I believe model captures the previous state by itself and i want to clear it whenever we open the modal.

After entering the OTP input in Modal, if we click on the Edit mobile number and when we again enter the input in mobile number, then previously entered OTP also shows up. I want to clear it after entering the new mobile number.

I have already tried setting the state to ("") on the onclick events but it doesn't help.

I could really use some help.

Code:

export default function Form() {
  // form default hooks
  const {register,handleSubmit, formState: { errors, isValid },} = useForm({mode: "onChange",criteriaMode: "all",});
  const {register: register2,handleSubmit: handleSubmit2,formState: { errors: errors2 },} = useForm({mode: "onChange",});
  const [verifyOTPFlag, setVerifyOTPFlag] = useState(true);
  //modal hooks
  const [mobileNumberInput, setMobileNumberInput] = useState(true);
  const [postVerificationMessage, setPostVerificationMessage] = useState();
  const [otpVerificationResult, setOtpVerificationResult] = useState(false);
  const [show, setShow] = useState(false);
  const [otpInput, setShowOtpInput] = useState(false);
  const [number, setNumber] = useState("");
  const [OTP, setOTP] = useState("");
  const [counter, setCounter] = useState(59);
  // post office and aadhar hooks
  const [districtName, setDistrictName] = React.useState("");
  const [stateName, setStateName] = React.useState("");
  //-------------------------modal functionalities start-------------------------
  const handleClose = () => {
    setShow(false);
    setShowOtpInput(false);};

  const handleShow = () => {
    setShow(true);};

  const showOtpInput = () => {
    getOTP(number);
    setOTP("");
    setShowOtpInput(true);
    setMobileNumberInput(false);
    setOtpVerificationResult(false);
  };

  const onSubmit = (data) => {
    data["district"] = districtName;
    data["state"] = stateName;
    setMobileNumberInput(true);
    setPostVerificationMessage("");
    setNumber("");

    if (verifyOTPFlag) {
      if (isValid) {
        setShow(true);
      } else {}
    } 
  };

  const onSubmit2 = () => {
    verifyOTP(OTP)
      .then((resp) => {
        alert("OTP verification Successful");
        setPostVerificationMessage(<p className="text-danger">OTP verification Successful</p>);
        setVerifyOTPFlag(false);
        setOtpVerificationResult(true);
        setShowOtpInput(false);
      })
      .catch((error) => {
        setPostVerificationMessage(<p className="text-danger"> OTP verification Failed. Kindly enter the correct OTP</p> )      
        setOtpVerificationResult(true);
      });};

  const onClickEditMobileNo = () => {
    setShowOtpInput(!otpInput);
    setOtpVerificationResult("");
    setOTP("");
    setMobileNumberInput(true);
  };

  return (
    <div>
      <div className="form-group">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="container mt-2">
            <label className="control-label">Full Name : </label>
            <input
              className="text-uppercase input-group input-group-lg form-control"
              type="text"
              name="username"
              {...register("username", {
                required: "Username is Required",
                pattern: {
                  value: /^[a-zA-Z0-9\s,\'-\/:&]*$/,
                  message: "Entered value does not match valid name format",
                },
              })}
            />
            <p className="errorMsg">{errors.username?.message}</p>

            <label className="control-label">C/o : </label>
            <input
              className="text-uppercase input-group input-group-lg form-control"
              type="text"
              name="careof"
              {...register("careof", {
                required: "Name of c/o is Required",
                pattern: {
                  value: /^[a-zA-Z0-9\s,\'-\/:&]*$/,
                  message: "Entered value does not match valid name format",
                },
              })}
            />
            <p className="errorMsg">{errors.careof?.message}</p>

            <label className="control-label">House No./Bldg./Apt : </label>
            <input
              className="text-uppercase input-group input-group-lg form-control"
              type="text"
              name="houseno"
              {...register("houseno", {
                required: "House number is Required",
              })}
            />
            <p className="errorMsg">{errors.houseno?.message}</p>

            <div className="text-center">
              <button
                className="button btn-primary btn px-3 mr-1"
                onClick={onSubmit}
              >
                Form Submit
              </button>
            </div>
          </div>
        </form>

        <form onSubmit={handleSubmit2(onSubmit2)}>
          {/* modal starts */}
          <Modal show={show} onHide={handleClose} backdrop="static">
            <Modal.Header
              style={{
                backgroundImage: "linear-gradient(180deg , #3f55c4 , #95a4f0",
              }}
              closeButton></Modal.Header>

            <Collapse in={mobileNumberInput}>
              <div
                className="input-field-sb mt-4 ml-5"
                style={{ width: "80%" }}
              >
                <input className="input-sb" maxLength="10" type="text" id="mobile"
                  // onChange={(e) => setNumber(e.target.value)}
                  {...register2("mobile", {
                    required: "Mobile number is Required",
                    pattern: {
                      value: /^[5-9]\d{9}$/,
                      message: "Entered value does not match valid name format",
                    },
                    onChange: (e) => setNumber(e.target.value),})}/>
                <p className="errorMsg">{errors2.mobile?.message}</p>
                <label className="label-sb" htmlFor="mobile">Enter Mobile Number: </label>
              </div>
            </Collapse>

            <Modal.Body>
              <Collapse in={otpInput}>
                <div>
                  <div className="d-flex justify-content-center">
                    <p className="text-center"><strong>{" "} We sent you a code to verify your mobile number{" "}</strong>{" "}
                      <b className="text-danger">{number}</b>
                      <span className="mobile-text"> Enter your OTP code here</span>
                    </p>
                  </div>
                  <input className="input-sbj" maxLength="6" onChange={(e) => setOTP(e.target.value)}/>
                </div>
              </Collapse>

              <Collapse in={otpVerificationResult}>
                <div className="text-center">{postVerificationMessage}</div>
              </Collapse>

              <div className="d-flex justify-content-center col-md-12">
                {otpInput ? (
                  <Button className="px-5 align-middle mt-4" variant="secondary" onClick={onSubmit2}>{" "} Verify</Button>) : (
                  <Button className="px-5 align-middle mt-4" variant="secondary"
                    onClick={errors2.mobile ? null : showOtpInput}>
                    {" "} Send OTP </Button>)}
              </div>

              <div className="row">
                <div className={otpInput ? "col-sm-6" : "col-sm-6 d-none"}>
                  <a className="btn">Resend OTP in 00:{counter}</a>
                </div>
                <div
                  className={otpInput? "text-right col-sm-6": "text-right col-sm-6 d-none"}>
                  <a className="btn" onClick={onClickEditMobileNo}> Edit Mobile number </a>
                </div>
              </div>
            </Modal.Body>
          </Modal>
        </form>
        {/* modal ends */}
      </div></div>);}

Answer 1

The easiest way would be just adding e.target.reset() in your onSubmit function.

const onSubmit = (data, e) => {
data["district"] = districtName;
data["state"] = stateName;
setMobileNumberInput(true);
setPostVerificationMessage("");
setNumber("");
e.target.reset();

if (verifyOTPFlag) {
  if (isValid) {
    setShow(true);
  } else {}
}
};

also keep the setNumber("") like this. I think this will solve the problem.