I am facing an issue with a method in my code (React Native).
I have an array of IDs and I need to send a 'GET' request for each ID to display a preview card for each.
To achieve this, I have used the 'map' method on my array.
The request is successful and then I call my method cardUser(user) to display the preview card.
Here is the section of my code where I implement the map (which is working fine):
render() {
if (!this.state.isLoaded) {
return (
<Spinner color='#84568c' />
);
} else {
var user = this.state.user;
return (
<ScrollView
refreshControl={
<RefreshControl
tintColor='#84568c'
refreshing={this.state.refreshing}
onRefresh={this._onRefresh.bind(this)} />
}
>
<Content padder>
{user.following.map(following => (
this.getUserByID(following)
))}
</Content>
</ScrollView>
);
}
}
I call getUserByID() (which is functioning properly):
getUserByID(id) {
fetch(api.base_url + api.user_url + '/' + id, {
method: "GET",
headers: { 'Authorization': 'Bearer ' + this.state.token }
})
.then((response) => response.json())
.then((responseData) => {
this.cardUser(responseData);
})
.done();
}
After receiving the response in responseData, I want to display and style each user. Therefore, I call cardUser() with a user object each time.
cardUser(user) {
console.log(user.id);
return (
<TouchableHighlight underlayColor='transparent' key={user.id}
onPress={() => this.props.navigation.navigate('UserProfile', {id: user.id})} onLongPress={() => this.alertUserId(user.id)} >
<View style={container.card}>
<View style={container.cardUser}>
<Image source={{uri: user.banner}} style={{position: 'absolute', width: '100%', height: 170, borderRadius: 20}} />
<View style={container.darkLayer}>
<Left>
<Thumbnail large source={{uri: user.photo}} style={{alignSelf: 'center'}}/>
</Left>
<Body>
<View style={{alignItems: 'center'}}>
<Text style={text.pseudoHomepage}>{user.username}</Text>
<Text style={[text.stats, {color: 'white'}]}>{user.first_name}</Text>
</View>
</Body>
<Right>
<Icon ios='ios-medal' android='md-medal' style={{color: 'white', alignSelf: 'center', fontSize: 40}}/>
</Right>
</View>
<View style={container.darkFooterLayer}>
<Text numberOfLines={2} style={text.bioFotter}>{user.bio}</Text>
</View>
</View>
</View>
</TouchableHighlight>
);
}
However, nothing is being displayed... Even though if I use console.log(user), it shows the correct items in the logs! In the correct order with no duplicate objects or any other anomalies...
Furthermore, if I add a console.log(user) inside the return(), it still displays the correct information and no error or warning messages are shown.
I hope this explanation is clear. If you require more details, please let me know. Thank you and have a great day!
(Apologies for any misspelled words, English is not my native language)