fetch data from api row counter - react-native

Question

By use of the following Code we can read Data from Server:
class SearchPage extends Component {
constructor(props) {
super(props);
var dataSource = new ListView.DataSource({rowHasChanged:(r1,r2) => r1.ruid != r2.guid});
this.state = {
id: 'SearchPage',
searchinpt: this.props.homesearchinpt,
shopid: this.props.shopid,
dataSource: dataSource.cloneWithRows(shopsArray),
isLoading: true
};
}
componentDidMount(){
this.fetchData();
}
fetchData() {
var name = this.state.searchinpt;
var API_URL = 'http://myurl';
var PARAMS = '?name=' + name;
var REQUEST_URL = API_URL + PARAMS;
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
loaded: true,
});
})
.done();
}
renderLoadingView() {
return (
<View style={styles.container}>
<Text>Loading</Text>
</View>
);
}
SearchisEmpty() {
return (
<View style={styles.container}>
<Text style={styles.notfound}>Not Found</Text>
</View>
);
}
SearchnotEmpty(){
return (
<ListView enableEmptySections = {true}
dataSource={this.state.dataSource}
renderRow=
{(shop) =>
<TouchableOpacity
onPress={(shop_id) => this.onSubmitPressed(shop.shop_id)} >
<View style={styles.container} >
<Image
source={{uri: shop.shop_logo}}
style={{width: 50, height: 50}}>
</Image>
<View>
<Text style={styles.shop_name}>{shop.shop_name}</Text>
<Text style={styles.shop_description}>{shop.shop_description}</Text>
</View>
</View>
<Text>{this.state.searchinpt}</Text>
<Text>{this.state.dataSource.getRowCount}</Text>
</TouchableOpacity>
}
style={styles.listView}
/>
);
}
onSubmitPressed(shopd){
this.props.navigator.push({
id: 'Shop',
passProps:{
thisshopid: shopd
}
})
}
render(shopsArray) {
if (!this.state.loaded) {
return this.renderLoadingView();
}else if(this.state.length < 1){
return this.SearchisEmpty();
} else{
return this.SearchnotEmpty();
}
}
}
There isn't any problem for Render.
Now we have some "if" that Whenever there isn't any Data, must show "Not found", But instead of (Not Found) it shows blank page
How can I solve the problem?

Answer 1

this.state.length will always be undefined as this.state is an object, not an array.
I would store the number of rows in the state to be able to control this behaviour. Something like this:
...
fetchData() {
...
fetch(REQUEST_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData),
loaded: true,
numRows: responseData.length
});
})
.done();
}
...
render(shopsArray) {
if (!this.state.loaded) {
return this.renderLoadingView();
}else if(this.state.numRows < 1){
return this.SearchisEmpty();
} else{
return this.SearchnotEmpty();
}
}