JAVASCRIPT

clear input field react-hook-form

const InputForm = () => {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    //...
    reset();
  };

react hook form reset

// destructure reset from useForm as like below
const { register, handleSubmit, errors, reset } = useForm();
// then call the reset function when all of the data has been sent to the server
reset();

//example:
  const { register, handleSubmit, errors, reset } = useForm();
  const onSubmit = (data) => {
    const url = 'http://localhost:5000/item';
    axios
      .post(url, {
        ...data,
      })
      .then((res) => {
        if (res.data.acknowledged) {
          toast('Item Added Successfully...');
          reset(); // here I am reseting the form
        }
      });
  };

react hook form reset only one field

resetField('input-name'); // register input and resetField works

react hook form clear form

// ❌ avoid the following with deep nested default values
const defaultValues = { object: { deepNest: { file: new File() } } };
useForm({ defaultValues });
reset(defaultValues); // share the same reference

// ✅ it's safer with the following, as we only doing shallow clone with defaultValues
useForm({ deepNest: { file: new File() } });
reset({ deepNest: { file: new File() } });