I have a customized input component for formik which includes an error label if one exists.
When I print it like this: {errors[field.name]}, it works.
However, {t(errors[field.name]?.toLocaleString())} does not work.
import { FieldProps, FormikErrors } from "formik";
import { useTranslation } from "react-i18next";
const CustomInput: React.FC<CustomInputProps & FieldProps> = ({
field,
form: { touched, errors },
type,
label,
...props
}) => {
const { t } = useTranslation();
return (
<div>
<label
htmlFor={field.name}>
{label}
</label>
<input
type={type}
{...field}
{...props}/>
{touched[field.name] && errors[field.name] && (
<div>
<p>
{errors[field.name]}
{t(errors[field.name])} <---- this does not work
</p>
</div>
)}
</div>
);
};
export default CustomInput;
I am encountering this error:
Argument of type 'string | FormikErrors<any> | string[] | FormikErrors<any>[] | undefined' is not assignable to parameter of type 'TemplateStringsArray | Normalize<{test: 'test'}> | (TemplateStringsArray | Normalize<...>)[]'.