Not able to get restaurant collection in react native using zomato API

Question

I am trying to display the zomato restaurant collection of a city on react native page. I am using zomato API. On zomato API documentation, I am using request URL given under "get zomato collections in a city"

Below is my code:

import React from 'react';
import { StyleSheet, Text, View, FlatList, Image, ActivityIndicator } from 'react-native';
import { Card, CardItem } from "native-base"


export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    }
  }

  getUserFromApi = () => {
    return (
      fetch("https://developers.zomato.com/api/v2.1/collections?city_id=1", {
        headers: {
          'Content-Type': 'application/json',
          'user-key': '2bf4669cad5a8230fd2b220a2d4a37b9'
        }
      })
        .then(response => response.json())
        .then(responseJson => {
          this.setState({
            isLoading: false,
            dataSource: responseJson.collections.collection
          })
        })
        
        .catch(error => console.log(error))
    )

  }
  componentDidMount() {
    this.getUserFromApi();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.progress}>
          <ActivityIndicator
            size="large"
            color="#01CBC6"
          />
        </View>
      )
    }
    return (
      <View style={{marginTop: 50}}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (

            <Card>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text> collections_id:  {item.collections_id}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text>title: {item.title}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}>
                </View>
                <View style={styles.userInfo}>
                  <Text>description: {item.description}</Text>
                </View>
              </CardItem>
            </Card>
          )}
        />
      </View>
    );
  }
}

I am not getting any error, but my screen is blank. There is no output on my screen. I am not able to understand where in my code I am making mistake

Answer 1

        //----------------set state like this ??-----------------------//
        this.setState({
          isLoading: false,
          dataSource: responseJson.collections,
        });
        //-------------------------------------?-----------------------//
        //    Also look FlatList for how the data is rendered           //

Working App : Expo Snack

import React from 'react';
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  ActivityIndicator,
} from 'react-native';
import { Card, CardItem } from 'native-base';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true,
      dataSource: [],
    };
  }

  getUserFromApi = () => {
    return fetch(
      'https://developers.zomato.com/api/v2.1/collections?city_id=1',
      {
        headers: {
          'Content-Type': 'application/json',
          'user-key': '2bf4669cad5a8230fd2b220a2d4a37b9',
        },
      }
    )
      .then((response) => response.json())
      .then((responseJson) => {
        console.log('data:', responseJson);

        //----------------set state like this------------------------//
        this.setState({
          isLoading: false,
          dataSource: responseJson.collections,
        });
        //------------------------------------------------------------//
        //Also look FlatList for how the data is rendered             //
      })

      .catch((error) => console.log(error));
  };
  componentDidMount() {
    this.getUserFromApi();
  }

  render() {
    if (this.state.isLoading) {
      return (
        <View style={styles.progress}>
          <ActivityIndicator size="large" color="#01CBC6" />
        </View>
      );
    }
    return (
      <View style={{ marginTop: 50 }}>
        <FlatList
          data={this.state.dataSource}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Card>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below ?? */}
                  <Text> collections_id: {item.collection.collection_id}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below ?? */}
                  <Text>title: {item.collection.title}</Text>
                </View>
              </CardItem>
              <CardItem>
                <View style={styles.container}></View>
                <View style={styles.userInfo}>
                  {/**access data of for rendering like below ?? */}
                  <Text>description: {item.collection.description}</Text>
                </View>
              </CardItem>
            </Card>
          )}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: { padding: 10 },
  userInfo: { padding: 10 },
});