FieldArray, Binding element 'form' implicitly has an 'any' type.

[Tomekmularczyk]

Bug report

Current Behavior

Since formik@2.4.1 I cannot update it because typings of FieldArray break

Expected behavior

FieldArray should be correctly typed

Your environment

Software	Version(s)
Formik	2.4.4
React	18.2.0
TypeScript	5.2.2
Browser	chrome
npm/Yarn	1.22.17
Operating System	macos

[Zikoat]

The same case is for normal Field. Related: https://github.com/jaredpalmer/formik/issues/2086, it was closed, but people seem to still have the issue as it was never fixed.

Workaround:

  const initialValues = {
    firstName: '',
    lastName: '',
    email: '',
  };

  return (
    <Formik initialValues={initialValues} onSubmit={() => {}}>
      <Form>
        <Field name="lastName">
          {({ field, form, meta }: FieldProps<typeof initialValues['lastName']>) => {
            field.value; 
            // field.value now has type string
            return (
              <div>
                <input type="text" placeholder="Last name" {...field} />
                {meta.touched && meta.error && <div className="error">{meta.error}</div>}
              </div>
            );
          }}
        </Field>
      </Form>
    </Formik>
  );

Notice the added : FieldProps<typeof initialValues['lastName']>, which tells typescript what type the props should have.