What does this notation mean in React-Native?-CodePudding

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>
)

CodePudding user response：

This technique is known as render props. Instead of passing JSX to an element as it's children, you pass a function which takes data from the parent as its arguments. In your example, Formik calls its children prop with those arguments - they are controlled and defined by the Formik component.

CodePudding user response：

This anonymous function is getting passed to another component as children prop, which is a variant of render prop pattern, a pattern used to share functionality between components.

Like the piece of code you posted, a component like Formik manages some functionality for an input, all of which are encapsulated within the Formik component. to share them, it asks you for a prop that should be function, and can be named anything, but mostly render or children.

Inside itself, the Formik component is structured like this:

const handleChange ... // some logic about input being changed

later in it its return it calls that function props you passed like this:

return <>{props.render({handleChange})</>

In your case, Formik is using the children prop, like this:

return <>{props.children({handleChange})</>