Undefined is not an object (rating "allRowsIDs.length") (React-Native)

Question

I am very new to React-Native. Following the main React-Native tutorial, I'm trying to get JSON data from https://facebook.imtqy.com/react-native/movies.json . "I can display the title and description properties, but when I try to display the" movies "property using ListView , I get the following error:

undefined is not an object (rating "allRowsIDs.length")

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, ListView } from 'react-native'; var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2}); export default class AwesomeProject extends Component { constructor(props) { super(props); this.state = { dataSource: 'init', }; } componentWillMount() { fetch('https://facebook.imtqy.com/react-native/movies.json') .then((response) => response.json()) .then((responseJson) => { this.setState({ dataSource: ds.cloneWithRows(responseJson.movies) }); }) .catch((error) => { console.error(error); }); } render() { return ( <View style={styles.container}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData}</Text>} /> </View> ); } } 

Answer 1

Your initial problem is that you set this.state.dataSource to the string 'init' . You want this to point to the data source that you declared earlier.

You can solve your first problem if you change: this.state = { dataSource: 'init', };

to this: this.state = { dataSource: ds };

However, this will result in a new error message. Something worked Objects are not valid as a React child... You can fix this by changing the rendering function to return a simple string, not the whole object. I suggest you start with the name and go from there. Try this and you should be on the way:

render() { return ( <View style={styles.container}> <ListView dataSource={this.state.dataSource} renderRow={(rowData) => <Text>{rowData.title}</Text>} /> </View> ); }