how can I update my page after clicking the submit form?

Question

How can I update the state after submitting the form? I would only like the form to be clear again. I can already successfully save in the firestore but the page is not updating. I have to reload to clear the form again

 const msg = (props) => {
      const [displayName, setdisplayName] = useState("");
      const [email, setEmail] = useState("");
      const [messag, setMessaeg] = useState("");
    
      const handleSubmit = (event) => {
        event.preventDefault();
        try {
          firestore.collection("contac").add({
            displayName: displayName,
            message: message,
          });
          alert("sent successfully");
        } catch (err) {
          console.log(err);
        }
      };
    
      return (
        <div>
          <form onSubmit={handleSubmit}>
            <TextField
              type="text"
              onChange={(e) => setdisplayName(e.target.value)}
            />
           
            <TextField
              type="text"
              onChange={(e) => setMsg(e.target.value)}
            />
            <Button
              type="submit"
            >
              Submit
            </Button>
          </form>
        
    

Answer 1

add some codes mark with : //<-- Add this

import React, { useState } from "react";
import { render } from "react-dom";


function App()  {
  let [displayName, setdisplayName] = useState('');
  let [email, setEmail] = useState("");
  let [messag, setMessaeg] = useState("");

  const handleSubmit = (event) => {
    event.preventDefault();
    try {
      firestore.collection("contac").add({
         displayName: displayName,
         message: message,
      });
      alert("sent successfully");
      setdisplayName(''); //<-- Add this
      setEmail(''); //<-- Add this
      setMessaeg(''); //<-- Add this
    } catch (err) {
      console.log(err);
    }
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={displayName} //<-- Add this
          onChange={(e) => setdisplayName(e.target.value)}
        />
       
        <input
          type="text"
          value={messag} //<-- Add this
          onChange={(e) => setMessaeg(e.target.value)}
        />
        <button
          type="submit"
        >
          Submit
        </button>
      </form>
      </div>
    )
  }

render(<App  />, document.getElementById("root"));

Demo

Answer 2

I'd usually clear the fields explicitly, with something like this: How to clear a form?

But if you're prefer to reload the entire page, you can do that with: window.location.reload(). See How to reload a page using JavaScript