I am trying to implement search with formik

[anurag55555]

What i am trying to achieve is a search box where you type and search operation happens simultaneously.

what i have done:

     `const { searchFunction, inputStyle, labelStyle, fieldStyle } = props;
      <Formik
      initialValues={{searchText:  "" }}
      onSubmit={(values, { setSubmitting }) => {
        setSubmitting(false);
      }}
    >
  {(formikProps: FormikProps<{searchText:''}>) => (
    <TextField
      handleChange={formikProps.handleChange}
      handleBlur={() => searchFunction(formikProps.values.searchText)}
      value={formikProps.values.searchText}
      name="searchText"
      placeholder="Search"
      label="Search :"
      id="searchText"
      iconName={IconNames.pen} 
      inputStyle={[styles.input, inputStyle]}
      fieldStyle={[styles.field, fieldStyle]}
      labelStyle={[styles.label, labelStyle]}
    />
  )}
</Formik>`

searchFunction is sent via Props from parent file where API call is taking place using value in searchText as user type

I am afraid if this is the right way

[johnrom]

I would do this as an effect, so I'd create a child element like:

// Trigger a search anytime the value of searchText changes and doesn't change again for 250ms
const AutoSearch = (props) => {
  const { values } = useFormikContext();
  const { searchFunction } = props;
  // debounce here so the search only happens when a user stops typing for 250ms
  // this uses lodash but you can use any debounce, or a useDebounce hook.
  // searchFunction must be memoized and should never change!
  const debouncedSearchFunction = useMemo(() => _.debounce(searchFunction, 250), [searchFunction]);

  useEffect(() => {
    values.searchText && debouncedSearchFunction(values.searchText);
  }, [values, debouncedSearchFunction]);

  return null; // or print some kind of result like autosuggestions
}

const MyForm = (props) => {
  return <Formik {...formikProps}>
    {(formik) => (
      <TextField
        handleChange={formik.handleChange}
        handleBlur={formik.handleBlur}
        value={formik.values.searchText}
        name="searchText"
        // etc
      />
      <AutoSearch searchFunction={props.searchFunction} />
    )}
  </Formik>
}