Data retrieved from state not display in FlatList - reactjs

Question

I'm having issues rendering data from firebase into the FlatList component.
I only have success rendering a FlatList when I hard code an array into the data property. When I pass data in through the state FlatList doesn't render anything.
Any help would be appreciated.
loadBooks = () => {
this.setState({
refreshing: true,
book_feed: []
});
var that = this;
database
.ref('books')
.once('value')
.then(function(snapshot) {
const exists = snapshot.val();
if (exists) data = snapshot.val();
for (var book in data) {
var bookObj = data[book];
that.state.book_feed.push({
id: book,
name: bookObj.name,
url: bookObj.image,
price: bookObj.price
});
}
})
.catch(error => console.log(error));
that.setState({
refreshing: false,
loading: false
});
};
loadNew = () => {
this.loadBooks();
};
componentDidMount() {
this.loadNew();
}
render() {
<View>
{this.state.loading == true ? (
<Text>Loading...</Text>) : (
<FlatList
refreshing={this.state.refreshing}
onRefresh={this.loadNew}
data={this.state.book_feed}
renderItem={({ item }) =>
<Text style={{ flex: 1 }}>{item.name}</Text>}
/>)}
</View>
}

Answer 1

You are directly mutating the state which is a wrong code practice.
The correct code would look like this:
let book_feed = [];
database
.ref('books')
.once('value')
.then(function(snapshot) {
const exists = snapshot.val();
//let data = []; define data if not defined.
if (exists) data = snapshot.val();
for (var book in data) {
var bookObj = data[book];
book_feed.push({
id: book,
name: bookObj.name,
url: bookObj.image,
price: bookObj.price
});
}
})
.catch(error => console.log(error));
that.setState({
book_feed,
refreshing: false,
loading: false
});