Formik: Formik prop "initialValues" - TS error

Created on 14 Jul 2020  路  3Comments  路  Source: formium/formik

馃悰 Bug report

Hi, I using Formik in my company's main project. and i faced this problem

Current Behavior

Type '{ FIO: string; email: string; phone: string; dob: string; country: string; city: string; }' 
is not assignable to type 'FormEvent<Element> & 
{ FIO: string; email: string; phone: string; dob: string; country: string; city: string; }'.
  Type '{ FIO: string; email: string; phone: string; dob: string; country: string; city: string; }' 
is missing the following properties from 
type 'FormEvent<Element>': nativeEvent, currentTarget, target, bubbles, and 11 more.

2020-07-14_11-20-05

Expected behavior

https://codesandbox.io/s/formik-boilerplateexample-64ugl?file=/src/App.tsx
I expect no TS errors

Suggested solution(s)

How could I solve this bug? Why this happended?

Additional context

VSCode said that initialValues should be that kind of type

(property) initialValues: React.FormEvent<Element> & {
    FIO: string;
    email: string;
    phone: string;
    dob: string;
    country: string;
    city: string;
}

The expected type comes from property 'initialValues' which is declared here - types.d.ts(143, 5)

Your environment

| Software | windows 64-x
| ---------------- | ---------- |
| Formik | 2.1.4
| React | 16.13.1
| TypeScript | 3.8.2
| Browser | Chrome
| npm/Yarn | yarn
| Operating System | windows

Most helpful comment

@Manimall What is the type signature of your onSubmit function? Formik will infer the generic type for Values in the form from the onSubmit prop if a generic is not passed directly:

Shortened version of the interface for <Formik> prop:

interface FormikConfig<Values> {
  /**
   * Submission handler
   */
  onSubmit: (
    values: Values,
    formikHelpers: FormikHelpers<Values>
  ) => void | Promise<any>;
}

If your onSubmit function's type signature is updated to not include FormEvent<Element>, then the type issue should be resolved.

All 3 comments

I really can't move on cause i stuck with this problem(((

@Manimall What is the type signature of your onSubmit function? Formik will infer the generic type for Values in the form from the onSubmit prop if a generic is not passed directly:

Shortened version of the interface for <Formik> prop:

interface FormikConfig<Values> {
  /**
   * Submission handler
   */
  onSubmit: (
    values: Values,
    formikHelpers: FormikHelpers<Values>
  ) => void | Promise<any>;
}

If your onSubmit function's type signature is updated to not include FormEvent<Element>, then the type issue should be resolved.

@HipsterBrown thank you so much!

Was this page helpful?
0 / 5 - 0 ratings