I would like to create Form using Formik. After submitting, I got following error:
Warning: Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input
Here's is my code:
import { useField } from 'formik';
import * as Styled from './SearchInput.styles';
const SearchInput = ({name, ...props }) => {
const [field] = useField(name);
return (
<Styled.Wrapper>
<Styled.Input {...field} {...props} placeholder="Placeholder" />
</Styled.Wrapper>
);
};
export default SearchInput;interface Values {
test: string;
}
const Form = () => {
return (
<Formik
initialValues={{
test: ''
}}
onSubmit={(values: Values) => {
console.log(values)
}}
>
{(props: FormikProps<Values>) => (
<FormikForm>
<SearchInput name="test" type="text" onChange={props.handleChange} />
<button type='submit'>Submit</button>
</FormikForm>
)}
</Formik>
)
};
export default Form;I know the problem is with the input component that doesn't have the built in name property. Component is called 'Search', but if I use component called 'Input' which has name property, everything works fine.
What should I do? I am using Typescript. Extend interface will work, or what? I'm in dead end