Quantcast
Channel: Active questions tagged react-native+typescript - Stack Overflow
Viewing all articles
Browse latest Browse all 6212

function gets called but no rendering is done

$
0
0

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

Viewing all articles
Browse latest Browse all 6212

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>