Is there any way to check if items are actually being rendered or not? In my code, I run a grapqhl query and then re-render some items accordingly. In my code, if there are users present, the showUsers
function works correctly.
However, when there are no users the noUsersText
function is called as confirmed by console.logs but I don't see anything rendered on the screen. I thought it might be a styling issue but I also tried increasing the font or adding more items to the view - it's clearly not working. What could the issue be?
When the function noUserText
is called, both isSubmitted
& isNotFound
are printed as true. I am using this in my main jsx {isSubmitted && noUsersText(userData) && isNotFound}
so I believe the text should show up.
const [isSubmitted, setIsSubmitted] = useState(false); const [isNotFound, setIsNotFound] = useState(false); const [userData, setUserData] = useState<UsersLazyQueryHookResult>(''); const noUsersText = React.useCallback( (data: UsersLazyQueryHookResult) => { console.log('isSubmitted', isSubmitted); console.log('Not Found', isNotFound); if (data) { if (data.users.nodes.length == 0) { return (<View><Text style={styles.noUsers}>No Users Found</Text></View> );} } }, [userData], ); const showUsers = React.useCallback( (data: UsersLazyQueryHookResult) => { if (data) { return (<View style={styles.friends}> {data.users.nodes.map( (item: { firstName: string; lastName: string; id: number }) => { const userName = item.firstName .concat(item.lastName); return (<View style={styles.item} key={item.id}> <View style={styles.addButtonContainer}><Button rounded style={styles.addButton} onPress={() => { addFriend(Number(item.id)); setIsSubmitted(false); setUserData(null); }}></Button></View></View> ); }, )}</View> ); } }, [createUserRelationMutation, userData], ); const addFriend = React.useCallback( (id: Number) => { createUserRelationMutation({ variables: { .., }, }); }, [createUserRelationMutation], ); const getFriendId = React.useCallback( (data: UsersLazyQueryHookResult) => { if (data) { if (data.users.nodes.length == 0) { setUserData(data); setIsNotFound(true); //Alert.alert('User Not Found'); } else { setUserData(data); } } }, [addFriend], ); const [loadUsers] = useUsersLazyQuery({ onCompleted: getFriendId, onError: _onLoadUserError, }); const handleSubmitForm = React.useCallback( (values: FormValues, helpers: FormikHelpers<FormValues>) => { setIsSubmitted(true); console.log('Submitted'); loadUsers({ variables: { where: { email: values.email }, }, }); values.email = ''; }, [loadUsers], ); return (<Modal visible={showAddFriendEmailPage} animationType="slide" transparent={true}><SafeAreaView><View style={styles.container}><View style={styles.searchTopContainer}><View style={styles.searchTopTextContainer}><Text style={styles.searchCancelDoneText} onPress={() => { toggleShowPage(); setIsSubmitted(false); setUserData(null); setIsNotFound(false); }}> Cancel</Text><Text style={styles.searchTopMiddleText}> Add Friend by Email</Text><Text style={styles.searchCancelDoneText}>Done</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.email} placeholderText='a@example.com' /></View><View style={styles.buttonContainer}><Button rounded style={styles.button} onPress={handleSubmit}><Text style={styles.text}>Search </Text></Button></View></View> )}</Formik></View> {isSubmitted && showUsers(userData)} {isSubmitted && noUsersText(userData) && isNotFound}</View></View></SafeAreaView></Modal> );};