The number is not clearing up after submission even if other fields do clear up

I have these fields that I want to clear up after submission. The other fields that were stated here do clear up except for the number. Why is this happening and how do I fix this? Any help would be appreciated. Thank you.

Textfield number:

const [number, setNumber] = useState("");
const handleNumber = (evt) => {
    const num = evt.target.validity.valid ? evt.target.value : number;

    setNumber(num);
  };

              <TextField
                  type="number"
                  pattern="[0-9]*"
                  variant="outlined"
                  label="Phone Number"
                  fullWidth
                  onChange={handleNumber}
                  required
                  inputProps={{
                    maxLength: 11,
                  }}
                  InputProps={{
                    disableUnderline: true,
                  }}
                />

Clearing up the states:

  const clearInfo = () => {
   //other fields here
    setFirstName("");
    setLastName("");
    setNumber("");
  };

Submission:

const handleSubmit = async (e) => {
    e.preventDefault();
    try {
     //codes here
      });
      updateData();
      clearInfo();  
    } catch (err) {
      console.log(err);
    }
    setOpen(true); //for the Alert
  };

Update: I tried setting up setNumber() and it still won’t clear up

Answer

Your TextField is currently uncontrolled because it doesn’t have a value property. That means when you change number, it has no effect on the TextField, because the TextField‘s content isn’t controlled by your code. To make it controlled, add value={number} to it. Then, clearInfo works correctly:

const { useState } = React;
const { TextField } = MaterialUI;

const Example = () => {
    const [number, setNumber] = useState("");

    const handleNumber = (evt) => {
        const num = evt.target.validity.valid ? evt.target.value : number;
        setNumber(num);
    };

    const clearInfo = () => {
        //other fields here
        // setFirstName("");
        // setLastName("");
        setNumber("");
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        try {
            //codes here
            // updateData();
            clearInfo();  
        } catch (err) {
            console.log(err);
        }
        // setOpen(true); //for the Alert
    };

    return <form onSubmit={handleSubmit}>
        <TextField
            type="number"
            pattern="[0-9]*"
            variant="outlined"
            label="Phone Number"
            fullWidth
            onChange={handleNumber}
            value={number}
            required
            inputProps={{
                maxLength: 11,
            }}
            InputProps={{
                disableunderline: "true", // *** Changed case and value per error from React
            }}
        />
        <button>Submit</button>
    </form>;
};

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

<div id="root"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@mui/material@5.5.0/umd/material-ui.development.js"></script>

I had to make two other changes there (other than commenting out missing functions, etc.) for the snippet to work without errors:

1. I removed the async from handleNumber because it didn’t have any await in it and unfortunately Stack Snippets using JSX don’t support async/await (because they use a really old version of Babel; please vote to fix that here).

2. React logged a warning about disableUnderline: true in InputProps saying (in effect) to make it disableunderline: "true" instead, so I did that.