How can i reset react form all input field?

Question

I used React Hooks Form library for my project. But I can't able to reset after submitting data. Below, I have added my code.

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

  const onSubmit = (data) =>{
    const url = `http://localhost:5000/products`; 
    fetch(url,{
      method: 'POST', 
      headers: {
        'content-type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(res=>res.json())
    .then(data=>{
      toast("successfully added product"); 
    });  
  };

  return (
    <div className='container border-2'>
      <PageTitle title={"Add Product"}></PageTitle>
      <div className="">
        <h4 className='mt-5'>Add Items</h4><hr />
        <form onSubmit={handleSubmit(onSubmit)} className="d-flex flex-column w-50 mx-auto">
          <input className='mb-3 p-1' type="text" name="itemName" placeholder='Item Name' {...register("itemName", { required: true })}/>
          <input className='mb-3 p-1' type="text" name="imgLink" placeholder='Image URL' {...register("imgLink", { required: true })}/>
          <input className='mb-3 p-1' type="textarea" name="description" placeholder='Product Description' {...register("description", { required: true })}/>
          <input className='mb-3 p-1' type="number" name="price" placeholder='Product Price' {...register("price", { required: true })}/>
          <input className='mb-3 p-1' type="number" name="quantity" placeholder='Quantity' {...register("quantity", { required: true })}/>
          <input className='mb-3 p-1' type="text" name="supplierName" placeholder='Supplier Name' {...register("supplierName", { required: true })}/>
          <input type="submit" value="Add Item" className='btn btn-primary' />
        </form>
      </div>
      <ToastContainer />
    </div>
  );
};

Without React hooks form, i used to reset form data.target.reset(); . how can i reset all input field? Please if you know this, say somethings. Thanks in advance...

Jay Patel · Accepted Answer · 2022-04-30 05:44:14Z

2

To reset form data using react-hook-form,

First, import reset module from react-hook-form like below

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

And then use reset module

const onSubmit = (data) =>{
...
reset() // Reset All field
reset({"itemName": "item"}) // Reset with values
}

answered Apr 30, 2022 at 5:44

Jay Patel

3042 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Shahzaib · Accepted Answer · 2022-04-30 05:44:11Z

1

You can reset the entire form or partial fields using the reset hook returned from useForm()

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

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

Have a look at the documentation here

answered Apr 30, 2022 at 5:44

Shahzaib

2882 silver badges8 bronze badges

Collectives™ on Stack Overflow

How can i reset react form all input field?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related