Formik: How do I prevent a `@typescript-eslint/unbound-method` error when using `useFormikContent()`?

[brendangibson]

I have just updated some @typescript-eslint modules to the latest versions:

"@typescript-eslint/eslint-plugin": "3.4.0",
"@typescript-eslint/parser": "3.4.0",
and am now getting the following error

22:9 error Avoid referencing unbound methods which may cause unintentional scoping of this @typescript-eslint/unbound-method
for the code

const { setFieldTouched } = useFormikContext();
which is in the same form as in the Formik docs

How do I get around this error?

[Tigge]

The function is defined as export function useFormikContext<Values>() which means it could potentially hold some sort of this object. It doesn't though, of course.

If it was declared as follows, the rule would not tigger:

export const useFormikContext = <Values,>() => {
  const formik = React.useContext<FormikContextType<Values>>(FormikContext);

  invariant(
    !!formik,
    `Formik context is undefined, please verify you are calling useFormikContext() as child of a <Formik> component.`
  );

  return formik;
};

[krailler]

Same here with this error ✋

When I use any function from formikbag eslint throw @typescript-eslint/unbound-method

[umidbekkarimov]

Related to the https://github.com/typescript-eslint/typescript-eslint/issues/2245#issuecomment-648712540
Long story short: all formik methods should be declared as an arrow functions

export interface FormikHelpers<Values> {
  /** Manually set top level status. */
- setStatus(status?: any): void;
+ setStatus: (status?: any) => void;
  /** Manually set errors object */
- setErrors(errors: FormikErrors<Values>): void;
+ setErrors: (errors: FormikErrors<Values>) => void;

[brendangibson]

Are you saying that this is something that needs to be fixed in Formik? And not something we can work around in our own code?

[krailler]

Are you saying that this is something that needs to be fixed in Formik? And not something we can work around in our own code?

I think that, formik types need be fixed

[krailler]

Can you submit a PR with fixed types? @umidbekkarimov

[umidbekkarimov]

@krailler sorry, I had a busy week. Thanks for the PR tho!

[krailler]

@krailler sorry, I had a busy week. Thanks for the PR tho!

Don't worry :)

[krailler]

Merged 🙌

[krailler]

This ticket can be closed @jaredpalmer

[m-haketa]

The same error occurs with handleBlur and handleChange.

package.json

"dependencies": {
  "formik": "^2.2.0",
}

source code

const { handleChange, handleBlur } = useFormikContext();

[maddhruv]

Closing as should be fixed with the latest release