Depending on what the results of the graphql query are, I am rendering some items in the function contact
export const Whitelist: React.FunctionComponent = (props) => { const [userData, setUserData] = useState<UsersQueryHookResult>(''); const called = () => { console.log('inner return') } const contacts = () => { console.log('running'); const { loading, error, data } = useUsersQuery({ variables: { where: { id: 34 }, }, }); console.log('DATA COMING', data); return (<View style={styles.allUsers}> {data.users.nodes.map( (item: { firstName: string; lastName: string; id: number }) => { const userName = item.firstName .concat('') .concat(item.lastName); return ( <View style={styles.item} key={item.id}> {called()} <Thumbnail style={styles.thumbnail} source={{ uri:'https://cdn4.iconfinder.com/data/icons/avatars-xmas-giveaway/128/afro_woman_female_person-512.png', }}></Thumbnail><Text style={styles.userName}>{userName}</Text><View style={styles.addButtonContainer}><Button rounded style={styles.addButton}><Icon name="plus" size={moderateScale(20)} color="black" /></Button></View></View> ); }, )}</View> ); }; return (<SafeAreaView style={{ flex: 1 }}><Container style={{ flex: 1, alignItems: 'center' }}><Item style={styles.addToWhitelist}><Icon name="add" onPress={() => navigation.navigate('AddContactTry')} /><Text style={styles.addToContactTitle}>Add contact</Text></Item><Text onPress={() => navigation.navigate('Home')}>Zurück</Text> {contacts()}</Container></SafeAreaView> );};However, I don't see any items rendered. If I render something after the first return in contacts(for example a thumbnail), I am able to see that. However, I don't see anything from the second return. How can I fix this?
I tried to use {called()} in the inner return to debug. It should show a log but it doesn't.