React hook form not getting cleared after submitting-CodePudding

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  >
        <h2>Enrollment Percentage                           
                

</h2>
          <label for="exampleFormControlInput1" >Program Name

</label>
          <input type="text"  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 >
          <label for="exampleFormControlTextarea1" >Program Code
</label>
          <input type="text"  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 >
          <label for="exampleFormControlTextarea1" >Number of seats sanctioned


</label>
          <input type="text"  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 >
          <label for="exampleFormControlTextarea1" >Number of Students admitted



</label>
          <input type="text"  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" >Submit</button>
        <button type="button"  >Download Excel</button>
        <button  >Download PDF</button>
         <button  >Download Word</button> 
        {/* <button type="button" >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?

CodePudding user response：

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)

CodePudding user response：

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:  });