How to use useFormik hook with async await in onSubmit event?

Question

I'm trying to find how to use async-await with useFormik hooks in onSubmit event. I want to use axios library inside onSubmit event but with async await, but I'm not able to find the way how to use async await inside onSubmit event.

import React from 'react';
import { useFormik } from 'formik';

const SignupForm = () => {
  const formik = useFormik({
    initialValues: {
      firstName: '',
      lastName: '',
      email: '',
    },
    onSubmit: values => {
      alert(JSON.stringify(values, null, 2));
    },
  });
  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        name="firstName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.firstName}
      />
      <label htmlFor="lastName">Last Name</label>
      <input
        id="lastName"
        name="lastName"
        type="text"
        onChange={formik.handleChange}
        value={formik.values.lastName}
      />
      <label htmlFor="email">Email Address</label>
      <input
        id="email"
        name="email"
        type="email"
        onChange={formik.handleChange}
        value={formik.values.email}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

Answer 1

Declare your "await" inside onSubmit function, and then call the api using axios after "await" keyword.

EXAMPLE: https://codesandbox.io/s/jovial-wescoff-uh2e3b

CODE:

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Field, Form } from "formik";
import axios from "axios";

const Example = () => (
  <div>
    <h1>Sign Up</h1>
    <Formik
      initialValues={{
        firstName: "",
        lastName: "",
        email: "",
        password: ""
      }}
      onSubmit={async (values) => {
        const user = await axios.get("https://reqres.in/api/login", {
          email: values.email,
          password: values.password
        });
        alert(JSON.stringify(user, null, 2));
      }}
    >
      {({ isSubmitting }) => (
        <Form>
          <label htmlFor="firstName">First Name</label>
          <Field name="firstName" placeholder="Eve" />

          <label htmlFor="lastName">Last Name</label>
          <Field name="lastName" placeholder="Holt" />

          <label htmlFor="email">Email</label>
          <Field name="email" placeholder="eve.holt@reqres.in" type="email" />

          <label htmlFor="password">Password</label>
          <Field name="password" placeholder="cityslicka" type="password" />

          <button type="submit" disabled={isSubmitting}>
            Submit
          </button>
        </Form>
      )}
    </Formik>
  </div>
);

ReactDOM.render(<Example />, document.getElementById("root"));

Answer 2

The onSubmit event receives a callback function, it can be a normal function or async function:

...
onSubmit: async (values) => {
  // await something here...
},
...