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!