Trouble clearing text fields in Material UI

Viewed 28

I am having trouble clearing my Material UI text fields using controlled components.

From the React developer tools, I can see that I am able to set the inputs back to null onClick/onSubmit, but nothing has changed in the UI.

Here's a snippet of my code:

const [ inputs, setInputs ] = useState(null);

  const sendData = async(data) => {
    try {
      const response = await fetch('/email', {
        method:'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    });
      const result = await response.json();
      console.log(result);
      return result
    } catch (err) {
      console.error(err)
    }       
  }

  const handleSubmit = (e) => {
    e.preventDefault();
    sendData(inputs);
    setInputs(null);
  };


  const handleChange = (e) => {
    setInputs({
      ...inputs,
      [e.target.id]: e.target.value,
    })
  }

Do I need to use the useEffect hook to trigger a re-render?

Many thanks in advance!

0 Answers
Related