how to clear form after submit in next js?

Question

here I have a contact form and i want all the values of form should be empty after submitting the form.
I have written following code.but this is not working after submitting the values of form remains same.
what is the problem here and how to solve it.

export default function contact() {

  const[name,setName]=useState("")
  const[phone,setPhone]=useState("")
  const[email,setEmail]=useState("")
  const[query,setQuery]=useState("")
  const [submitted, setSubmitted] = useState(false)

const  handleSubmit=(e)=>{
    e.preventDefault()
    console.log(e);
    let data = {
      name,
      email,
      phone,
      query
    }
    console.log(data);
    axios.post('http://127.0.0.1:8000/api/create/',data).then((res)=>{
      console.log(res);
      setSubmitted(true)
      setName('')
      setPhone('')
      setEmail('')
      setQuery('')
    })
  }
    return (
    <>
      <div>
        <h1>Contact Page</h1>
      </div>
        
        <div >    
           <form action="contact" method="post">
              <input name="name"  onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
              <input name="phone" onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
              <input name="email" onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
              <textarea name="text" onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
              <button onClick={(e)=>{handleSubmit(e)}} value="Send" >Submit </button>
          </form> 
               
                                
      </div>
    </>
    )
  }

Answer 1

Currently you are missing value prop in your inputs so your inputs are uncontrolled components that's why you are not able to clear them after form submit.

Try to add value prop like below:-

<input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
<input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
<input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
<textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />

Answer 2

Add value prop your inputs then your form shall be cleared after submit:

<form>
    <input name="name" value={name} onChange={(e)=>{setName(e.target.value)}} placeholder="Name" / ><br />
    <input name="phone" value={phone} onChange={(e)=>{setPhone(e.target.value)}} placeholder="Phone" /><br />
    <input name="email" value={email} onChange={(e)=>{setEmail(e.target.value)}} type="email" placeholder="E-mail" / ><br />
    <textarea name="text" value={query} onChange={(e)=>{setQuery(e.target.value)}} placeholder="How can we help you?" ></textarea><br />
</form>

Answer 3

First, make sure that your api-call ends successfully, according your code, you clean form only when request passed successfully:)

Answer 4

I think a better way to do this is to rest the form using the.reset() method.

Like this:

document.getElementById("postCodeForm").reset();