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>

CodePudding user response：

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.