CODEWITHSUNDEEP
reactjsasynchronousformik
Manoj Sethi
Manoj Sethi

Reputation: 2028

React Formik onSubmit Async called twice

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?

Upvotes: 16

Views: 7342

Answers (3)

Nishipal Rana
Nishipal Rana

Reputation: 1

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

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

Upvotes: -1

CristianR
CristianR

Reputation: 489

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}
>

Upvotes: 16

Ricardo Setti
Ricardo Setti

Reputation: 21

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

Should be one or the other.

Upvotes: 0

Related Questions