Need a way to reset my form after i hit submit..everything works well except for the form dosent reset after the submit .pls check out my code thanks.I checked out for something called reset() online but the answers are way complicated is there any simple method

import { useEffect, useState } from "react";
import { useParams } from "react-router-dom";



function AddReviewForm({user,handleAddReviews}){
    const params = useParams();
   const[img,setImg]=useState("");
   const[r,setR]=useState("")
      const newReview = {
        img,
        r,
        restaurant_id: params.id,
        user_id: user.id,
      };
      const configObj = {
        method: "POST",
        headers: {
          Accept: "application/json",
          "Content-Type": "application/json",
        },
        body: JSON.stringify(newReview),
      };


      // function handleReviewChange(event) {
      //   setreviewData({
      //     ...reviewData,
      //     [event.target.name]: event.target.value,
      //   });
      // }
      function handleReviewSubmit(event) {
        event.preventDefault();
        fetch(`/reviews`, configObj)
          .then((r) => r.json())
          .then((review)=>{
            handleAddReviews(review);
            
          }
          );
      }
    return  (
        <>
        <h1>Add review form</h1>
        <form onSubmit={handleReviewSubmit}>
       
        <label htmlFor="img"  >Image</label>
         <input type="text" name="img"   value={img}  onChange={(e) => setImg(e.target.value)} placeholder="name" />
       
        <label htmlFor="r"  >Review</label>
         <input type="text" name="r"   value={r}  onChange={(e) => setR(e.target.value)} placeholder="review" />
     
       <input type="submit" />

        </form>
        </>
    )
}
export default AddReviewForm;

CodePudding user response：

You have to set each variable to an empty string:

setR('')
setImg('')