My code looks like this. Previously, I was rendering and mapping some data using another component called UserList
. However, now I have changed it to a FlatList
When I was using {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */}
, every time I clicked on the button, the handleSubmit
function was called successfully.
However, now that I am using FlatList
, nothing happens when I click on the button. The handle submit doesn't run and hence I don't see anything from the flatList. What am I doing wrong?
return (<SafeAreaView><View><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text> Cancel</Text></View><View><Formik initialValues={initialValues} onSubmit={handleSubmitForm} validationSchema={validationSchema}> {({ handleChange, handleBlur, handleSubmit, values }) => (<View style={styles.searchFieldContainer}><View style={styles.form}><FieldInput handleChange={handleChange} handleBlur={handleBlur} value={values.input} fieldType="input" icon="user" placeholderText="Email or Phone Number or Name" /><ErrorMessage name="input" render={(msg) => (<Text style={styles.errorText}>{msg}</Text> )} /></View><View style={styles.buttonContainer}><Button rounded style={styles.searchButton} onPress={handleSubmit}><Text style={styles.searchButtonText}>Search </Text></Button></View></View> )}</Formik></View> {/* <UserList onSendRequest={onSendRequest} data={userData}></UserList> */} {userData !== null && <FlatList data={userData.users} horizontal={false} renderItem={({ item }) => (<SingleUser user={item} onSendRequest={onSendRequest} /> )} keyExtractor={(item) => item.id.toString()} /> }</View></View></SafeAreaView> );};