How can I clear out value of text boxes after a submit event?

Question

I have this simple form and want to clear out the text box values after a successful submit. What I'm trying isn't working. The only way I can clear them is to refresh the page. This should be something simple that I'm missing?

 const [postdata, setPostdata] = useState({
   name: '',
   desc: ''
   })

<form onSubmit={handleSubmit}>
  <input type="text" name="name" placeholder="Name"  onChange={handleInput} />
  <input type="text" name="desc" placeholder="Desc" onChange={handleInput} />
  <button type="submit" name="submit">Submit</button>
</form>

const handleSubmit = async (event) => {
   setPostdata({ ...postdata, [event.target.name]: '' })
   }

Answer 1

Use your state to drive the input values:

<input type="text" name="name" placeholder="Name" value={postdata.name} onChange={handleInput} />
<input type="text" name="desc" placeholder="Desc" value={postdata.desc} onChange={handleInput} />

And reset that state to empty values whenever you like:

setPostdata({
  name: '',
  desc: ''
});