How to access data in firebase from react-native? - reactjs

Question

I am having trouble rendering data from firebase.
Here is my current data structure on firebase:
{name: "sleep"}
ie. that's the only object the database contains atm.
Using a ListView, it renders a row (shows the background and border of the row according to the number of items in the database), however, there is no text inside the row..
ListView code:
<ListView
enableEmptySections={true}
dataSource={this.state.dataSource}
renderRow={this._renderItem.bind(this)}
/>
_renderItem(task) {
return (
<ListItem task={task} />
);
}
Code for ListItem:
class ListItem extends Component {
render() {
return (
<View style={styles.listItem}>
<Text style={styles.listItemTitle}>{this.props.task.name}</Text>
</View>
);
}
}
Code used to listen to tasks
listenForTasks(tasksRef) {
tasksRef.on('value', (dataSnapshot) => {
var tasks = [];
dataSnapshot.forEach((child) => {
tasks.push({
name: child.val().name,
_key: child.key
});
console.log(dataSnapshot.val()); // returns JSON object of {name: 'sleep'}
console.log(tasks); // returns an array containing the object of {name: 'sleep'}
console.log(dataSnapshot.val().name); // returns 'sleep'
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(tasks)
});
});
}

Answer 1

You need to setup a constructor for your ListItem Component:
class ListItem extends Component {
//Add this....
constructor(props){
super(props)
}
//--------------
render() {
return ( <View style={styles.listItem}>
<Text style={styles.listItemTitle>
{this.props.task.name}
</Text>
</View> );
}
}