CODEWITHSUNDEEP
reactjsreact-hooks
user1941537
user1941537

Reputation: 6695

react-hook-form - empty input field after each submit

I'm trying to understand how react-hook-form is working. For this I created the following example:

import React from 'react';
import { useForm } from 'react-hook-form';

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

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Form.Group controlId='formBasicName'>
          <Form.Label>Name</Form.Label>
          <Form.Control
            type='text'
            name='name'
            ref={register}
          />
        </Form.Group>

        <Form.Group controlId='formBasicEmail'>
          <Form.Label>Email address</Form.Label>
          <Form.Control
            type='email'
            name='email'
            ref={register}
          />
          
        <Button className='submitBtn' type='submit'>
          Submit
        </Button>
      </Form>
    </>
  );
};

export default InputForm;

It works and if I submit the form I can see the data object in console. The only problem is that after each submit the input boxes are still showing their value. I want that after each submit the value of input boxes get empty. That would be easy with useState, but now that I'm using react-hook-from, I don't know how to do that.

Upvotes: 20

Views: 54801

Answers (7)

uxxi
uxxi

Reputation: 128

const { reset, formState: { isSubmitted } = useForm();

useEffect(() => {
  if (isSubmitted) {
    reset();
  }
}, [isSubmitted]);

Upvotes: 0

Hmad Afzal
Hmad Afzal

Reputation: 1

//use resetField function 

const { register, handleSubmit, resetField } = useForm();
const onSubmit = async (data) => {
    console.log(data);
      resetField('fieldname');
   
    }

Upvotes: 0

Phil Lucks
Phil Lucks

Reputation: 3973

PLEASE DO NOT accept the previous answers - the RHF docs (see Rules & Submit With Reset tab) do not approve of reset inside the onSubmit callback:

It's recommended to not invoke reset inside onReset or onSubmit callback.

The proper way is to have a useEffect that updates after all async work has completed:

const { reset } = useForm();
const [isSafeToReset, setIsSafeToReset] = useState(false);
  
useEffect(() => {
   if (!isSafeToReset) return;

   reset(result); // asynchronously reset your form values
}, [reset])

const onSubmit = async (data, e) => {
    try {
      await fetch('./api/formValues.json'); 
      setIsSafeToReset(true);
    } catch (e) {
      // do something w Err
    }
};

Upvotes: 20

Olcay Ozdemir
Olcay Ozdemir

Reputation: 577

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

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

Add it to the submit function

Upvotes: 41

Joel
Joel

Reputation: 125

React Hook Forms v7. This will clear the form data.

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

    const onSubmit = (data, e) => {
        console.log(data)
        reset('', {
            keepValues: false,
        })
    }

Upvotes: 7

Uddip Acharjee Shuvo
Uddip Acharjee Shuvo

Reputation: 183

Use the following code to reset the input fields

const onSubmit = (data, e) => {
  e.target[0].value = ''; // for name
  e.target[1].value = '';  // for email
};

Upvotes: 0

ShinaBR2
ShinaBR2

Reputation: 2715

Use this submit function:

const onSubmit = (data, e) => {
  e.target.reset();
};

Upvotes: 14

Related Questions