Getting "Uncaught (in promise) TypeError: Failed to fetch' when using Formik

Question

I'm learning how to use Formik. I'm trying to hit my backend which works via Postman but I can't seem to fetch using Formik.

This is my App.js code for onSubmit in :

            <Formik
              initialValues={{
                ...initialState,
              }}
              validationSchema={formValidation}
              onSubmit={values =>

                fetch('/api/client', {
                 method: 'POST',
                  headers: {
                'Content-Type': 'application/json'
                 },
                body: JSON.stringify(values),
                 }).then(res => res.json())}>

This is my Button component code:

const ButtonWrapper = ({
  children,
  ...otherProps
}) => {
  const { submitForm } = useFormikContext();

  const handleSubmit = () => {
    submitForm();
  };

  const configButton = {
    variant: 'contained',
    color: 'primary',
    fullWidth: true,
    onClick: handleSubmit
  };

  return (
    <Button
      {...configButton}
    >
      {children}
    </Button>
  );
};

export default ButtonWrapper;

Unsure what I'm doing incorrectly

Answer 1

TypeError: Failed to fetch indicates that the network request was not successful. Try opening up your browser's developer tools and select the Network tab. See if the request that React is making matches what you are making in Postman. Also check the developer console tab as it should log the exact error which caused the request to fail.

There are additional checks that the browser performs in network requests, one of which is response headers and CORS or cross origin request scripting. If the Access-Control-Allow-Origin response header does not match the localhost site then you will get this error.