formik icon indicating copy to clipboard operation
formik copied to clipboard

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

Open Tomekmularczyk opened this issue 9 months ago • 1 comments

Bug report

Current Behavior

Since [email protected] I cannot update it because typings of FieldArray break

image

image

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

Tomekmularczyk avatar Sep 14 '23 08:09 Tomekmularczyk

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.

Zikoat avatar Dec 12 '23 11:12 Zikoat