Why the handleChange of Formik is not working when I set multiple functions?

Question

I have problem on formik, the handleChange of formik is not working properly when I add other function inside the onValueChange. Is there any solutions for this type of scenario. It happens right now when I submit the form there is no value.

Form Submitted Result:

pickup_region: ""

Other Function:

const HandleGetProvince = (id) => {

    PickupAddress[0]['pickup_region'] = id
    dispatch(ProvinceList(id));
}

Formik:

<Formik
        initialValues={{
            pickup_region: '',
        }}
        onSubmit={(values) => ProcessBookingBtn(values)}
    >
        {({ handleChange, handleBlur, handleSubmit, values, errors, touched }) => (

            <View style={{ backgroundColor: 'white', borderColor: 'white', borderRadius: 20 }}>
                <VStack space={1} p={5}>
                    <View>
                        
                        

                        <View style={{ flexDirection: 'row', flex: 1, flexWrap: 'wrap', alignItems: 'flex-start' }}>
                            <View style={{ width: '50%', padding: 3 }}>
                                <Text style={{ fontSize: 12, marginTop: 10 }}>Region</Text>
                                <Select
                                    accessibilityLabel="Region"
                                    placeholder="Region"
                                    placeholderTextColor="#000"
                                    color="#000"
                                    mt={1}
                                    name="pickup_region"
                                    onValueChange={(itemValue) => {[handleChange('pickup_region'), HandleGetProvince(itemValue)] }}
                                >
                                    {
                                        regions && regions.data ? (
                                            regions.data?.map((data, i) => {
                                                return (

                                                    <Select.Item key={i} label={data.name} value={data.id.toString()} />

                                                )
                                            })
                                        ) : <Select.Item label="No Region Available" value="" />
                                    }
                                </Select>
                            </View>

                        <View style={{ padding: 40 }}>
                            <TouchableOpacity onPress={handleSubmit}>
                                <Button type="submit" style={{ borderColor: '#FA0A0A', backgroundColor: '#FA0A0A' }}>
                                    <Text style={{ color: 'white', fontWeight: 'bold' }}>Save</Text>
                                </Button>
                            </TouchableOpacity>
                        </View>
                    </View>

                </VStack>

            </View>

        )}

    </Formik>

Answer 1

Prop onValueChange accepts a function, that receives value.

onValueChange={(itemValue) => {
  // your definition
}}

In order to call two functions with changed value, you have to use setFieldValue. Change your function to:

onValueChange={(itemValue) => {
  setFieldValue("pickup_region", itemValue);
  HandleGetProvince(itemValue);
}

You get setFieldValue from props from Formik component:

{({ handleChange, handleBlur, handleSubmit, values, errors, touched, setFieldValue }) => (...)

One more thing: there is nothing wrong with naming your function with uppercase, but in most codebases you will encounter camelCase. You can read more about conventions here.

Answer 2

<Formik initialValues={{
    title: data?.title,
    description: data?.description,
    price: data?.price,
    image: data?.image
}}
        validationSchema={validationSchema}
        onSubmit={handleSubmit}
>
    {
        ({
             handleSubmit,
             errors,
             touched,
             handleChange,
             handleBlur,
             values,
             isSubmitting,
             setFieldValue
         }: FormikProps<Product>) => {
            return (
                <>
                    <Box my={5} textAlign="left">
                        <form onSubmit={handleSubmit}>
                            <FormControl>
                                <FormLabel> Title </FormLabel>
                                <Input
                                    title="title"
                                    type="text"
                                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setFieldValue("title", e.target.value)}
                                    onBlur={handleBlur}
                                    value={values.title}
                                    disabled={isSubmitting}
                                    isInvalid={touched.title && !!errors.title}
                                />
                                {touched.title && errors.title && <Text color="red.500"> {errors.title} </Text>}
                            </FormControl>

                            <FormControl mt={4}>
                                <FormLabel> Description </FormLabel>
                                <Textarea
                                    title="description"
                                    name="description"
                                    value={values.description}
                                    onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setFieldValue("description", e.target.value)}
                                    onBlur={handleBlur}
                                    disabled={isSubmitting}
                                />
                            </FormControl>