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

Issue

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 first 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 second 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 didn't 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:

Solution

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.

Answered By - Isaiah Bjorklund