How to modify Textinput values with Formik?

Asked

Viewed 202 times

-1

My situation is as follows: the user informs a zip code and the application queries an API, returning the data I will set in the other fields as city, state etc..

For that I need to change the property value of others TextInput and recover them by submitting the form, but I don’t know how to do it.

<Formik                initialValues={{
                            name: "",
                            birthDate: null,
                            cpf: "",
                            cep: "",
                            city: "",
                            neighborhood: "",
                            complement: "",
                            state: "",
                            address: "",
                            numeberAddress: ""
                        }}
                        validationSchema={FormSchema}
                        onSubmit={onSubmit}
                    >
                        {({ touched, values, errors, handleChange, handleSubmit, setFieldValue }) => (
                            <View >
                                <Input valueInput={values.cep}
                                    onChangeText={(value) => { consultCep(value, setFieldValue) }}
                                    keyboardType="numeric"
                                    placeholder="Informe o CEP"
                                    mask="99999-999"
                                    labelInput="CEP"
                                    iconInput="location-arrow"
                                    required={true}
                                />
                                {errors.cep && touched.cep && <HelperText type="error"> {errors.cep}</HelperText>}

                                <Input valueInput={values.city}
                                    onChangeText={handleChange('city')}
                                    placeholder="Informe sua cidade"
                                    labelInput="CIDADE"
                                    iconInput="city"
                                    required={true}
                                />
                                {errors.city && touched.city && <HelperText type="error"> {errors.city}</HelperText>}
react-native

  • Formik is which package in Positorios npm?

  • I followed the documentation https://formik.org/docs/overview I am using Formik with Yup to validate the fields.

  • but, this <Input> is Reactnative correct? Do not paste image put code and all code

  • <Imput is a Component created for Textinput, I am trying to change the data with setFieldValue method but without success.

  • is by function setFieldValue

1 answer

0


Check that the names of the props that receive the values of the Formik are correct and you can also declare Formik as a const to access its functions throughout the page, for example:

const { touched, values, errors, handleChange, handleSubmit, setFieldValue } = useFormik({
   Propriedades do seu Formik aqui...
})

Browser other questions tagged react-native

You are not signed in. Login or sign up in order to post.