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

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 },
});