score:0
Accepted answer
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.
Source: stackoverflow.com
Related Query
- Form handling in ReactJS with functional component
- ReactJS Handling Form Errors With MaterialUI
- React Functional components Form handling with object in state
- Reactjs functional component default props with props object
- Reactjs - translating a class component to a functional one with hooks
- Component with form keeps refreshing page in ReactJS
- Select option child component not reseting to key 0 on form submit with reactjs
- How to export a stateless functional component with styles in Reactjs
- Reactjs - Call function on startup of application with a functional component
- ReactJS component lifecycle methods with fat arrow functional component
- facing issue with updating state in reactjs for a functional component
- Working with the same ReactJS form component on the same page
- Rendering the functional component is not the same with class component in ReactJS
- Basic issue with ReactJS setting state in functional component
- ReactJS component names must begin with capital letters?
- How to use children with React Stateless Functional Component in TypeScript?
- ReactJS - Pass props with Redirect component
- Testing React Functional Component with Hooks using Jest
- Upload File Component with ReactJS
- Set state when testing functional component with useState() hook
- How can I prevent my functional component from re-rendering with React memo or React hooks?
- Why React useState with functional update form is needed?
- How to specify a constructor with a functional component (fat arrow syntax)?
- ReactJS component not rendering textarea with state variable
- How to avoid 'children with same key' when replacing state in ReactJs component
- Functional React Component with an argument in curly braces
- How to type a Form component with onSubmit?
- React - useRef with TypeScript and functional component
- Accessing the State of a Functional Component with React Hooks when Testing with Enzyme
- Eslint: Problem with default props in functional component (Typescript - React)
More Query from same tag
- Promise Redux : TypeError: next is not a function
- Different component in a same React route based on roles
- How to make a Material UI react Button act as a react-router-dom Link?
- how to handle route param changes to component using @connect
- how to access response headers in React from Rails api-pagination gem
- How to make React Redux async action return a promise?
- Unhandled Rejection (Error): The file given is not an image
- How to get values from object and assign them to consts
- React JS how to fix cannot add property updater, object is not extensible, when using 'This'
- How to handle multiple api request,to show loading indicator from one variable in redux store
- Redirection from a query string to a path
- how to update an object within an array during an asyncThunk.fulfilled action in Redux
- Recharts: How to sort order of elements in Tooltip?
- ReactJS state update and immediate access
- Params in React Router v4 is not working correctly
- How do I mutate an array inside my state?
- Playing consecutive audio sounds in ReactJS. Delay issue when live
- IntelliJ TypeScript plugin complains that "window is not defined" in React project
- How do I get the outerHTML of a cloned element?
- FormData with NextJS API
- Add Form Fields Dynamically -- ReactJs
- PlayFramework with Scala, WebJars, ReactJS and RequireJS?
- Unexpected behavior with useState hook React
- componentDidMount seems not to be called after setState in ReactJS
- In React and React Router, how to display a header on every page except home page
- Inline style table row w/ React
- how to capture the file of an input element so that I can pass it as an argument to another function in react
- How would I add a if..else statement in this code?
- Why should I use immutablejs over object.freeze?
- React component is not re-rendering multiple time