React Native TypeError: undefined is not a function (near '...this.state.clubs.map...') - api

Question

I am having trouble displaying my api data in the app, i feel like it has something to do with the way i want to map the data.
When i use my 1st api it works but it is not the right one because it shows all the clubs info not a single club.
Here is the postman:
Here is the console:
This is what is displays in the app:
The problem I am having is that when i use my 2nd api link that allows me to get a single clubs data i get an error when mapping it.
Here is my code, the only thing i changed was the api link, I also tried to use c.club.numberOfCheckIns but it didnt work either.
class Profile extends React.Component {
constructor(props) {
super(props)
this.state = {
clubInfo: []
};
}
componentDidMount() {
this._get('http://ec2-3-15-176-119.us-east-2.compute.amazonaws.com:8080/clubs/get/1').then(
data => {
this.setState({ clubInfo: data })
}
)
}
_get = async (endpoint) => {
const res = await fetch(endpoint, {
headers: {
'Content-Type': 'application/json',
'Access-Token': '1*adminaccesstoken'
}
})
const data = await res.json();
console.log(data)
return data;
}
renderClubData() {
return this.state.clubInfo.map((c, index) => {
const { clubId, name, city, country, email, verified } = c //destructuring
return (
<View key={c.clubId}>
<Text
bold
size={20}
color="#B8AA5B"
style={{ marginBottom: 4 }}
>{c.numberOfCheckIns}
</Text>
</View>
)
})
}
render() {
return (
<Block flex style={styles.profile}>
<Block flex>
<ImageBackground
source={{ uri: Images.EventPhoto }}
style={styles.profileContainer}
imageStyle={styles.profileBackground}
>
<ScrollView
showsVerticalScrollIndicator={false}
style={{ width, marginTop: '55%' }}
>
<Block flex style={styles.profileCard}>
<Block style={styles.info}>
<Block middle style={{ marginTop: 10, paddingBottom: 10 }} row space="between">
<Block middle>
{this.renderClubData()}
<Text size={12}>CHECK-INS</Text>
</Block>
Here is the postman:

Answer 1

I figured it out:
componentDidMount() {
this._get('API').then(
data => {
this.setState( {clubInfo: [data]})
}
)
}
renderClubData() {
return this.state.clubInfo.map((c, index) => {
return (
<View key={c.club.clubId}>
<Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }} >
{c.club.numberOfCheckIns}
</Text>
</View>
)
})
}
I used [] for data to turn the JSON into an array.

Answer 2

The problem is the way you handle this.state.clubInfo.map() method. In order to use map method, you need to pass an array.
That is why it is worked previously because you send an array of data to this.state.clubInfo.map().
Change your renderClubData() as below because now you are getting an object as a result of the API request.
renderClubData() {
return (
<View key={c.clubId}>
{
this.state.clubInfo.club.numberOfCheckIns &&
<Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }}>
{this.state.clubInfo.club.numberOfCheckIns}
</Text>
}
</View>
)
}
#DevAS is also right. you can try [this.state.clubInfo].map() as below,
renderClubData() {
return [this.state.clubInfo].map((c, index) => {
return (
<View key={c.club.clubId}>
<Text bold size={20} color="#B8AA5B" style={{ marginBottom: 4 }} >
{c.club.numberOfCheckIns}
</Text>
</View>
)
})
}
I hope this will helps you.