React Formik onSubmit Async called twice

Question

I am trying to use async with onSubmit with following code for Formik in React

import React from "react";
import { Formik, Form, Field } from "formik";
import { Row, Col, Button } from "react-bootstrap";

const AddUser = () => {
  const initialValues = {
    name: "",
  };

  return (
    <>
      <Row className="h-100">
    <Col xs={12} sm={1}></Col>
    <Col xs={12} sm={10} className="align-self-center">
      <div className="block-header px-3 py-2">Add Dataset</div>
      <div className="dashboard-block dashboard-dark">
        <Formik
          initialValues={initialValues}
          onSubmit={async (values, { setSubmitting }) => {
            alert("hi");
            setSubmitting(false);
          }}
        >
          {({ isValid, submitForm, isSubmitting, values }) => {
            return (
              <Form>
                <Field
                  name="name"
                  label="Name"
                  placeholder="Dataset Name"
                />
                <Button
                  type="submit"
                  disabled={!isValid || isSubmitting}
                  className="w-100 btn btn-success"
                  onClick={submitForm}
                >
                  Add Dataset
                </Button>
              </Form>
            );
          }}
        </Formik>
      </div>
    </Col>
    <Col xs={12} sm={1}></Col>
  </Row>
</>
  );
};

export default AddUser;

When I try to submit. It does alert 'hi' twice. When I don't use onSubmit as async then it works fine.

What am I doing wrong or is there any other way to perform async functionalities as I need to perform RestAPI calls?

I am sorry I am able to fix it. On button click, I need not pass submitForm as button type is 'submit'. It was a silly mistake of mine. Sorry to bother you who came here for help and I hope if somebody is facing such issue it helps them. — Manoj Sethi, May 02 '20 at 10:34
thanks mate, I was having the same issue. Right, that was a silly mistake — Adam Kosmala, Aug 14 '20 at 08:15

score 10 · Answer 1 · answered Apr 02 '21 at 01:13

10

Delete type="submit", because there is already an action onClick={submitForm}

<Button
    type="submit"
    disabled={!isValid || isSubmitting}
    className="w-100 btn btn-success"
    onClick={submitForm}
>

answered Apr 02 '21 at 01:13

CristianR

373
4
8

score 0 · Answer 2 · edited Feb 12 '21 at 19:25

0

Be sure to NOT add both
onClick={formik.formik.handleSubmit}
and
<form onSubmit={formik.handleSubmit}>.

Should be one or the other.

edited Feb 12 '21 at 19:25

SherylHohman

16,580
17
88
94

answered Feb 12 '21 at 13:04

Ricardo Setti

21

score -1 · Answer 3 · answered May 20 '22 at 16:43

-1

I faced the same issue. Adding e.preventDefault() in my Form Submit Handler worked for me.

onSubmitHandler = (e) => {
e.preventDefault();
//Handle submission
}

answered May 20 '22 at 16:43

Nishipal Rana

1
1

React Formik onSubmit Async called twice

3 Answers3