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

Question

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.

Answer 1

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

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

Add it to the submit function