useFormikContext and TypeScript #3924
Replies: 1 comment 3 replies
-
|
Or even how to assign a values type to |
Beta Was this translation helpful? Give feedback.
-
|
You can define a generic type to be used by the form sub component. export type FormValues = {
[key: string]: string;
};Adapt the example below for your use case. import { useFormikContext } from 'formik';
type FormFieldErrorTextProps = {
fieldName: string;
};
export type FormValues = {
[key: string]: string;
};
const FormFieldErrorText = ({fieldName}: FormFieldErrorTextProps): JSX.Element => {
const { touched, errors } = useFormikContext<FormValues>();
const hasError = Boolean(touched[fieldName] && errors[fieldName]);
return (
<>
{hasError ? (
<span className="text-red-600 text-xs mt-1 animate-fade-in-down">
{errors[fieldName] as string}
</span>
) : null}
</>
);
};
export default FormFieldErrorText;Hopefully, this helps. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you! I had no idea that you could pass the form values interface as an argument to the |
Beta Was this translation helpful? Give feedback.
-
|
@abdulmatinsanni isn't that the same as using the type |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
I've a large form which is divided into several smaller components, each of this components use
useFormikContext()to get info likevalues,touched,erros, and so on.I've created a separated file with the type for my form:
Which I pass to the context hook:
And also use it for the initial form values:
It works fine, but I was wondering, is there a better way for doing this? I was hoping to be able to get Formik to generate this type for me vs doing it manually, is this possible?
Beta Was this translation helpful? Give feedback.
All reactions