Cannot extract any attribute from JSON array - react-native

Question

export default class Home extends Component{
constructor(){
super();
const ds = new ListView.DataSource({rowHasChanged:(r1,r2)=>r1!==r2})
this.state={
userDataSource:ds,
}
}
componentDidMount(){
fetch('http://192.168.0.102/giftbaenew/rest/V1/products?searchCriteria[filter_groups][0][filters][0][field]=category_id&searchCriteria[filter_groups][0][filters][0][value]=10',{
headers:{
'Authorization':'Bearer 7dmc9lprh5b1t07hkadyhmtb6etm1jaj'
}
})
.then((response)=>{return response.json()})
.then((responseData)=>{
alert(responseData) // i get the alert message.
this.setState({
userDataSource:this.state.userDataSource.cloneWithRows(responseData)
})
})
}
renderRow(user,sectionId,rowId,highlightRow){
const data=this.state.userDataSource
return(
<View >
<Text style={{color:'black'}}>
{data.items[0].name} //error
</Text>
</View>
)
}
render(){
return(
<ScrollView>
<View>
<View style={styles.container}>
<TouchableOpacity onPress={()=>{this.props.navigation.navigate('Login')}}>
{/* <Text style={{textAlign:'right',marginTop:5,color:'white',fontSize:16}}>Logout</Text> */}
<Image source={require('../Images/logout.png')} style={{width:30,height:30,marginLeft:325}}/>
</TouchableOpacity>
<Text style={styles.text}>
ShakeHands
</Text>
<TextInput placeholder='Search' placeholderTextColor='black' style={{backgroundColor:'white',marginTop:13,height:35,width:320,marginLeft:20,marginRight:20,padding:10}}/>
</View>
<View style={{marginTop:10}}>
<ListView dataSource={this.state.userDataSource} renderRow={this.renderRow.bind(this)}/>
</View>
</View>
</ScrollView>
)
}
}
const styles = StyleSheet.create({
container:{
backgroundColor:'#455a64',
height:125
},
text:{
textAlign:'left',
fontSize:25,
color:'white',
marginTop:0,
marginLeft:18
}
})
I am not able to see anything on my app.
Please help me out.
items[] is an array of JSON data each item has its attributes like name,etc
I m trying to display name but nothing is displayed.
Error is undefined is not an object evaluating data.items[0]

Answer 1

Please try my code it will defenatily resolve your issue
import React, { Component } from 'react';
import { FlatList, ActivityIndicator, Text, View } from 'react-native';
export default class FetchExample extends React.Component {
constructor(props){
super(props);
this.state ={ isLoading: true}
}
componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
});
})
.catch((error) =>{
console.error(error);
});
}
render(){
if(this.state.isLoading){
return(
<View style={{flex: 1, padding: 20}}>
<ActivityIndicator/>
</View>
)
}
return(
<View style={{flex: 1, paddingTop:20}}>
<FlatList
data={this.state.dataSource}
renderItem={({item}) => <Text>{item.title}, {item.releaseYear}</Text>}
keyExtractor={(item, index) => index}
/>
</View>
);
}
}