I took over an unfinished react-native project and this notation confused me. An anonymous function is written in curly brackets and given various arguments ( handleChange, handleBlur, handleSubmit, values). Where do we define those arguments ? Where can an anonymous function get the data for these arguments? What exactly is the function of these arguments?
This codeblock was inside the JSX template between various react-native elements.Entire project was built along TypeScript.
return (<ScrollView contentContainerStyle={{ flex: 1, flexGrow: 1, padding: spacing.xl, }}><KeyboardAvoidingView style={{ flex: 1 }}><TouchableWithoutFeedback onPress={Keyboard.dismiss} style={{ flex: 1 }}><ImageBackground source={require('@/assets/images/text-bg.png')} resizeMode="cover" minHeight="100%" flex={1}><Box flex={1}><Text color="loginHeader" fontSize={36} marginBottom="xl"> Login</Text><Formik initialValues={{ phoneNumber: '' }} onSubmit={async values => await submitLogin(values)}> {({ handleChange, handleBlur, handleSubmit, values }) => (<><Box width="100%" marginBottom="xl"><TextInput keyboardType="phone-pad" placeholder="Phone Number" placeholderTextColor={colors.neutral500} value={values.phoneNumber} onChangeText={handleChange('phoneNumber')} onBlur={handleBlur('phoneNumber')} /></Box><Button label="Login" onPress={handleSubmit} backgroundColor="buttonBackground" padding="md" borderRadius="sm" shadowColor="black" shadowOpacity={0.4} shadowRadius={8.3} elevation={20} shadowOffset={{ width: 0, height: 6 }} /></> )} {/* <Box width="100%" marginBottom="xl"><TextInput secureTextEntry={true} placeholder="Password" placeholderTextColor={colors.neutral500} /></Box> */}</Formik></Box></ImageBackground></TouchableWithoutFeedback></KeyboardAvoidingView></ScrollView>)