I have following Formik component.
I would like to clear the field whenever I click 'Clear filters' button. I figured out something like that, but this does not works as I expected. This clear the fields but user is still able to see field value. How should I implement this to clear formik value and user will not see value in form
const Form = () => {
const handleClearFilters = (resetForm, values) => {
console.log(values)
resetForm();
}
return (
<Formik
initialValues={{
dog: '',
}}
onSubmit={() => {
// onsubmit functionality
}}
>
{({resetForm, values}) => (
<FormikForm>
<Field value={values.dog} name="dog" type="text" as={SearchInput} />
<Styled.ButtonsWrapper>
<Styled.Button onClick={() => handleClearFilters(resetForm, values)} kind='secondary'>Clear filters</Styled.Button>
<Styled.Button type='submit'>Search</Styled.Button>
</Styled.ButtonsWrapper>
</FormikForm>
)}
</Formik>
);
};
export default Form;SearchInput
const SearchInput = ({ name, ...props }) => {
const [, , helpers] = useField(name);
const { setValue } = helpers;
const handleChange = (value: string | null) => {
setValue(value);
};
return (
<Styled.Wrapper>
<Styled.Input
{...props}
onChange={handleChange}
placeholder="Search for job name"
searchType={'primary'}
/>
</Styled.Wrapper>
);
};
export default SearchInput;