CODEWITHSUNDEEP
javascriptreactjstypescriptformik
Victor Nițică
Victor Nițică

Reputation: 1

How do I solve this formik onSubmit error with Typescript?

for some reason I'm getting an error on onSubmit prop of Formik:

Type '(values: { email: string; password: string; }) => { type: string; payload: { email: string | null; password: string | null; }; }' is not assignable to type '((values: { email: string; password: string; }, formikHelpers: FormikHelpers<{ email: string; password: string; }>) => void | Promise) & ((values: { email: string; password: string; }) => { ...; })'. Type '(values: { email: string; password: string; }) => { type: string; payload: { email: string | null; password: string | null; }; }' is not assignable to type '(values: { email: string; password: string; }, formikHelpers: FormikHelpers<{ email: string; password: string; }>) => void | Promise'. Type '{ type: string; payload: { email: string | null; password: string | null; }; }' is not assignable to type 'void | Promise'.

These are the Formik props:

<Formik
                    initialValues={{ email: '', password: ''}}
                    validationSchema = { LoginSchema }
                    validateOnChange={false}
                    onSubmit={ (values) => requestLogin(values.email, values.password)}
                >

And this is requestLogin action:

export const requestLogin = (email: string, password: string) => ({
type: types.AUTH_USER,
payload: {
    email: email || null,
    password: password || null
}

});

Everything should be fine since requestLogin takes 2 parameters of type 'string' or am I missing something here?

Upvotes: 0

Views: 1768

Answers (1)

Yimin
Yimin

Reputation: 365

Change

onSubmit={ (values) => requestLogin(values.email, values.password) }

to

onSubmit={ (values) => {requestLogin(values.email, values.password)} }

Your error:

Type '{ type: string; payload: { email: string | null; password: string | null; }; }' is not assignable to type 'void | Promise'.

You're returning an object with type { type: string, ... }, instead of the type void | Promise (returning nothing), because arrow functions with no curly brackets automatically return the value inside it.

Upvotes: 0

Related Questions