handleSubmit with Formik using TypeScript

Question

I have successfully written a Login component in React using plain Javascript. I would now like to convert this component to TypeScript. I have defined some types and also threw in some "any" just to initially compile. Unfortunately, the onClick parameter in my submit button throws the following error:

TS2322: Type '(e?: FormEvent | undefined) => void' is not assignable to type '(event: MouseEvent<HTMLElement, MouseEvent>) => void'.

Here is the relevant code:

class Login extends React.Component<LoginProps, LoginState> {
  constructor(props) {
    super(props);

    this.login = this.login.bind(this);
  }

  async login(values) {
    const user = {
      email: values.email,
      password: values.password,
    };

    const query = `mutation userLogin(
      $user: UserLoginInputs!
    ) {
      userLogin(
        user: $user
      ) {
        token
      }
    }`;

    const data: any = await graphQLFetch(query, { user });
    if (data && data.userLogin.token) {
      const decoded: any = jwt.decode(data.userLogin.token);
      const { onUserChange } = this.props;
      onUserChange({ loggedIn: true, givenName: decoded.givenName });
      const { history } = this.props;
      history.push('/');
    }
  }

  render() {
    return (
      <Formik
        onSubmit={this.login}
        validationSchema={loginSchema}
        initialValues={{
          email: '',
          password: '',
        }}
      >
        {({
          handleSubmit,
          handleChange,
          values,
        }) => (
          <Card>
            <Card.Body>
              <Form>
                <Form.Group>
                  <Form.Label>E-mail</Form.Label>
                  <Form.Control
                    name="email"
                    value={values.email}
                    onChange={handleChange}
                  />
                </Form.Group>
                <Form.Group>
                  <Form.Label>Password</Form.Label>
                  <Form.Control
                    name="password"
                    value={values.password}
                    onChange={handleChange}
                  />
                </Form.Group>
              </Form>
              <Button
                type="button"
                variant="primary"
                onClick={handleSubmit}
              >
                Submit
              </Button>
            </Card.Body>
          </Card>
        )}
      </Formik>
    );
  }
}

I'm new to TypeScript and don't fully understand why an error occurs regarding e versus event when the login function does not explicitly reference either of those. Can someone please help me assign types to my handleSubmit function (aka login)?

Answer 1

I hope that example could help you to resolve your issue

import { Field, Form, Formik } from 'formik';
import * as React from 'react';
import './style.css';

interface MyFormValues {
  firstName: string;
}

export default function App() {
  const initialValues: MyFormValues = { firstName: '' };

  const getSubmitHandler =
    () =>
    (values, formik) => {
      console.log({ values, formik });
      alert(JSON.stringify(values, null, 2));
      formik.setSubmitting(false);
    };

  return (
    <div>
      <Formik
        initialValues={initialValues}
        onSubmit={getSubmitHandler()}
      >
        {(formik) => (
          <Form>
            <label htmlFor="firstName">First Name</label>
            <Field id="firstName" name="firstName" placeholder="First Name" />
            <button
              type="button"
              onClick={(event) =>
                getSubmitHandler()(formik.values, formik)
              }
            >
              Submit
            </button>
          </Form>
        )}
      </Formik>
    </div>
  );
}