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 showUsersfunction works correctly.
However, when there are no users the noUsersTextfunction 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& isNotFoundare 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> );};