handleSubmit function not successfully firing using Formik

Question

I am using Formik + Yup to construct a form but can't seem to get passed a basic issue, I feel like I'm missing something obvious. My handleSubmit function wont fire on button click - even something simple like a console log. If I add a pure function to the onClick button handler it fires, but Formik doesn't seem to be passing down my handleSubmit constructed with the withFormik HOC.

I've tried adding the handler to the Form component, doesn't work there either.

const formikEnhancer = withFormik({
  mapPropsToValues: props => ({
    firstName: props.firstName || '',
    ...
  }),
  validationSchema: yup.object().shape({
    firstName: yup.string().required('Please enter your first name'),
   ...
  }),
  handleSubmit: (values, formikBag) => {
    console.log('test');
    }
  },
});

const BusinessFundingForm = ({
  values,
  isSubmitting,
  errors,
  handleBlur,
  handleChange,
  handleSubmit,
  touched,
  data,
}) => {

  return (
        <Form className="form" id="form-id">
          <Row>
            <Col xs={12} sm={6}>
              <InputField
                id="first-name"
                type="text"
                name="firstName"
                value={values.firstName}
                onChange={handleChange}
                onBlur={handleBlur}
                placeholder="First Name"
                label="First Name"
              />
              {errors.firstName &&
                touched.firstName && <Error>{errors.firstName}</Error>}
            </Col>
           ...
          </Row>

          <Row>
            <ButtonWrapper>
              <Button
                type="submit"
                tall
                onClick={handleSubmit}
                varianttype={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                    ? 'disabled'
                    : 'outline'
                }
                disabled={
                  isSubmitting ||
                  (!!errors.firstName ||
                    formHelpers.isEmpty(values.firstName)) 
                }
                text="Submit →"
              />
            </ButtonWrapper>
          </Row>
        </Form>
      </FormGrid>
    </Element>
  );
};

export default formikEnhancer(BusinessFundingForm);

For brevity's sake I deleted all the properties except the firstName property

Answer 1

Sometimes there are errors on the page which prevent Formik from triggering handleSubmit thus its good to check if there are no errors by outputting errors on the screen or console.

To overcome these type of scenarios during development you can always use: <pre>{JSON.stringify(errors, null, 2)}</pre> as a DOM node so that you are constantly aware of the issue on the UI and then remove it or comment it during committing to your branch.

Also I trust there are no syntax errors on your code because your handleSubmit seems to have extra closing brace.