React hook form not getting cleared after submitting

Question

I am using react hook form for my project. I have send the post request. It was successfully inserted into database now when i want to clear the inputs its not getting cleared even after i have used reset() function. I am using react hook form v7. If someone knows plz suggest me. Thanks in advance!

Here's my code:

import React from 'react'
import { useState } from 'react';
import {useForm} from 'react-hook-form';
import axios from 'axios';
import { useEffect } from 'react';
export const Enrollment = () => {
  const {register,handleSubmit,formState: { errors },reset}=useForm();
  
    const onSubmit = async(data) => {
     

      
          const requestOptions = {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        };
    
        const response = await fetch("http://localhost:3001/enrollmentpercent", requestOptions);
        const jsonData = await response.json();
        console.log(jsonData)
        // console.log(response)
        reset();
        
        
        
    };
  
    return (
        <div className="container ">
        <form onSubmit={handleSubmit(onSubmit)}>
        <div class="mb-3 mt-5" >
        <h2>Enrollment Percentage                           
                

</h2>
          <label for="exampleFormControlInput1" class="form-label">Program Name

</label>
          <input type="text" class="form-control w-25" name="programname"  id="exampleFormControlInput1"
                {...register("programname", { required: true, pattern:{value:/^[a-zA-Z]+$/ ,message:'Only characters allowed'}})}  
               />
               {errors.programname && errors.programname.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.programname && errors.programname.type === "pattern" && (
        <div style={{color:'red'}}> Only characters allowed</div>
      )}
               
        </div>
       
        <div class="mb-3 w-25 ">
          <label for="exampleFormControlTextarea1" class="form-label">Program Code
</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="programcode" {...register("programcode", { required: true ,pattern:{value:/^[0-9\b]+$/ ,message:'Only number allowed'}})}  />
          {errors.programcode && errors.programcode.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.Programcode && errors.Programcode.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        <div class="mb-3 w-25">
          <label for="exampleFormControlTextarea1" class="form-label">Number of seats sanctioned


</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="seats" {...register("seats", { required: true,pattern:{value:/^[0-9\b]+$/ ,message:'Only Number allowed' }})}/>
          {errors.seats && errors.seats.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.seats && errors.seats.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        <div class="mb-3 w-25">
          <label for="exampleFormControlTextarea1" class="form-label">Number of Students admitted



</label>
          <input type="text" class="form-control" id="exampleFormControlTextarea1"  name="students" {...register("students", { required: true ,pattern:{value:/^[0-9\b]+$/ ,message:'Only number allowed'}})}  />
          {errors.students && errors.students.type === "required" && (
        // <span role="alert">This is required</span>
        <div style={{color:'red'}}> This is required</div>
        
      )}
      
        {errors.students && errors.students.type === "pattern" && (
        <div style={{color:'red'}}> Only numbers allowed</div>
      )}
        </div>
        
       
        
        <button type="submit" class="btn btn-primary me-md-2">Submit</button>
        <button type="button" class="btn btn-primary me-md-2" >Download Excel</button>
        <button class="btn btn-primary me-md-2" >Download PDF</button>
         <button class="btn btn-primary me-md-2" >Download Word</button> 
        {/* <button type="button" class="btn btn-primary">Upload File</button> */}
        </form>
      </div>
    )
}

I've imported the reset and used it with onSubmit but it doesn't seem to work. How should I fix this?

Answer 1

In the useForm for register state you did not mention the state,it should be empty object so change useform as this

  const {register, handleSubmit,formState: { errors },reset} =useForm({
        register:{}
      });

For more info you can check this->https://react-hook-form.com/get-started (Integrating Controlled Inputs)

Answer 2

it should work, as from v7.* some version they did false to shouldUnregister, please try with that

By default, an input value will be retained when input is removed. However, you can set shouldUnregister to true to unregister input during unmount.

const {register, handleSubmit,formState: { errors },reset} =useForm({shouldUnregister: true, reValidateMode:  });