Form handling in ReactJS with functional component - reactjs

Question

I have following code.
my code
What I want to is when I click on "SEND" button it show error or success messages. I tried:
.then(() =>
setAfterSendSuccess("Thank you. We will contact you shortly.")
)
.catch(() =>
setAfterSendError("Something went wrong. Please try again later")
);
But it always show green success message.
Also I have "Loading" component which should start load when I click on Send button.
For that one I tried:
{!!setFormLoading(true) && <Loading />}

Answer 1

The issue is with your use of the fetch api. You're expecting fetch to reject the promise if there's a 4xx or 5xx http response code, but fetch doesn't do that. It only rejects on network failures or other things that prevent the fetch from occurring at all.
So you'll need to modify your code something like the following:
fetch(`real link`, {
method: "POST",
body: JSON.stringify({ email }),
})
.then((response) => {
if (!response.ok) {
throw response;
}
return response.json(); // if you don't care about the data, you can leave this out
})
.then(() => setAfterSendSuccess("Thank you. We will contact you shortly."))
.catch(() =>
setAfterSendError("Something went wrong. Please try again later")
);
Also I have "Loading" component which should start load when I click on Send button.
Your jsx needs to be this: {formLoading && <Loading />}, and you'll need to call setFormLoading with true at the start of the submit function, and with false in the .then and .catch.