Formik handleChange - use hooks

Viewed 2311

before installing Formik, my input looked like so:

         const [search, setSearch] = useState('');
         ....

         <View style={styles.profileEditContainer__top}>
          <TextInput
            style={styles.profileEditContainer__form}
            autoCapitalize="none"
            placeholder="Enter what you want to create.."
            placeholderTextColor={Colors.formPlaceHolderDefault}
            name="search"
            type="search"
            value={search}
            onChangeText={(e) => setSearch(e)}
            autoCorrect={false}
            defaultValue={search}
          />
          <Button
            disabled={!search}
            title="Create"
            onPress={(e) => {
              createNewCar(e);
            }}
          />
        </View>

in onChangeText, I would set every character I typed to a state prop called search. With every key that I typed, an API called would be made to get some data from the db.

for example:

if I typed h into the input, the db would return 2 cars honda, hyundai

I read that Formik can simplify a lot of the form setup in React, so I downloaded it, however, the handleChange prop from Formik wants to keep track of values.search

         <Formik
          initialValues={{
            search,
          }}
          onSubmit={(values) => {
            console.log('values', values);
          }}>
          {({ handleChange, handleSubmit, values }) => (
            <View style={styles.profileEditContainer__top}>
              <TextInput
                style={styles.profileEditContainer__form}
                autoCapitalize="none"
                placeholder="Enter what you want to create.."
                placeholderTextColor={Colors.formPlaceHolderDefault}
                autoCorrect={false}
                value={values.search}
                onChangeText={(e) => {
                  handleChange(values.search);
                  setSearch(e);
                }}
              />
              <Button
                disabled={!search}
                title="Create"
                onPress={handleSubmit}
              />
            </View>
          )}
        </Formik>

Now I can't type into the form because value is pointing at values.search instead of search like it did originally.

Question

How do I fire setSearch in onChangeText but also add search into the formik values prop?

1 Answers

you can make use of setFieldValue('search', e.target.value) instead of handleChange() change the code to the following:

<Formik
      initialValues={{
        search,
      }}
      onSubmit={(values) => {
        console.log('values', values);
      }}>
      {({ handleChange, handleSubmit, values, setFieldValue }) => (
        <View style={styles.profileEditContainer__top}>
          <TextInput
            style={styles.profileEditContainer__form}
            autoCapitalize="none"
            placeholder="Enter what you want to create.."
            placeholderTextColor={Colors.formPlaceHolderDefault}
            autoCorrect={false}
            value={values.search}
            onChangeText={(e) => {
              //handleChange(values.search);
              setFieldValue('search', e.target.value)

              setSearch(e);
            }}
          />
          <Button
            disabled={!search}
            title="Create"
            onPress={handleSubmit}
          />
        </View>
      )}
    </Formik>
Related