Flatlist is empty and array has values in it

Question

I filled an array with querySnapshot but flatlist doesn't render anything

Tried to change renderItem code

constructor(props) {
  super(props);
  var rootref = firebase.firestore().collection("deneme");
  var wholeData = []
  rootref.get().then(function(querySnapshot){
      querySnapshot.forEach(function(doc) {
        wholeData.push(doc.data())
      });
  });
};

render() {
  return (
    <View>
      <FlatList
         data={this.wholeData}
         renderItem={({item}) => <Text>{item.isim}, {item.soyisim}</Text>}
      />
    </View>
  );
};

Stundji · Accepted Answer · 2019-04-28 10:25:42Z

2

You will have to use setState to notify the component that the data has changed. Change your code to do the following:

 constructor(props) {
      super(props);

      this.state = {
       data: []
      };

      var rootref = firebase.firestore().collection("deneme");
      rootref.get().then(querySnapshot => 
       const wholeData = querySnapshot.map(doc => doc.data()));

       // notify your component that the data has changed
       this.setState({
        data: wholeData
       })
    };

 render() {
  return (
    <View>
      <FlatList
         data={this.state.data} // get your data from the state
         renderItem={({item}) => <Text>{item.isim}, {item.soyisim}</Text>}
      />
    </View>
  );

This way as soon as you have received the wholeData, the FlatList will update.

answered Apr 28, 2019 at 10:25

Stundji

8487 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

magnumrox3 Over a year ago

Thanks but now im having another error querySnapshot is not a function.

Stundji Over a year ago

querySnapshot is just an object. You should check your code if you are calling it as a function by mistake.

magnumrox3 Over a year ago

I copied the entire code. const part is giving an error.

Collectives™ on Stack Overflow

Flatlist is empty and array has values in it

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related