I’m trying to create a custom TextInput component using the useField hook from Formik. The code compiles, but I get an error with useField when trying to pass props to it. Here’s the code I’m working with:
import { useField } from 'formik';
import { StyledTextInput, StyledLabel } from './../components/styles';
export const TextInput = ({ ...props }) => {
const [field, meta] = useField(props); // <-- Error here
return (
<div>
<StyledLabel htmlFor={props.name}>{props.label}</StyledLabel>
<StyledTextInput {...field} {...props} />
{meta.touched && meta.error ? (
<div style={{ color: 'red' }}>{meta.error}</div>
) : null}
</div>
);
};
Error Message:
Argument of type ‘{ [x: string]: any; }’ is not assignable to
parameter of type ‘string | FieldHookConfig’. Type ‘{ [x:
string]: any; }’ is not assignable to type
‘ClassAttributes &
InputHTMLAttributes & FieldConfig’.
What I’ve Tried:
I’ve confirmed that props includes a name property, as that’s required by useField.
I also tried explicitly typing props with FieldHookConfig, but the error persists.
Expected Behavior:
I expect useField to accept props and return field and meta, which I can then use to bind the StyledTextInput to Formik’s state.
Question:
What is the correct way to pass props to useField so that it accepts the properties I’m passing and removes the error? Is there something wrong with the way I’m spreading field and meta?
Any help or guidance on how to resolve this error would be greatly appreciated!