Items not rendering in a FlatList

Question

I'm trying to retrieve all the data I have in my firestore database but I can't seem to accomplish it. Been trying to do for the past couple days I had no luck. The data doesn't seem to be retrieving at all for some reason. I did a console log of my useState() variable which is where the data should be stored, but nothing is showing. I am also new to using React Native...

 const [evs, setData] = useState([]); const subscriber = firestore.collection('stations'); useEffect(() => { return subscriber.onSnapshot((querySnapshot) => { const list = []; querySnapshot.forEach(doc => { const {connectorID, connectorType} = doc.data(); list.push({ id: doc.id, connectorID, connectorType }); }); setData(list); }); }, []); console.log("LIST OF ITEMS: " + evs); return ( <View> <Text>Charging Points Available</Text> <SectionList data={evs} keyExtractor={(item) => item.id} renderItem={({item}) => <TextComp data={item.key}/>} /> </View> );

UPDATE, Still not working..

 const subscriber = firestore.collection('stations') .onSnapshot(querySnapshot => { const list = []; querySnapshot.forEach(documentSnapshot => { list.push({ ...documentSnapshot.data(), key: documentSnapshot.id, }); }); setData(list); setLoading(false); });

Answer 1

If your effect returns a function, React will run it when it is time to clean up

remove return from useEffect. and try

useEffect(() => 
  {
      subscriber.onSnapshot((querySnapshot) => {
          const list = [];
          querySnapshot.forEach(doc => {
            const {connectorID, connectorType} = doc.data();
            list.push({
              id: doc.id,
              connectorID,
              connectorType 
            });
          });
          setData(list);

      });
  }, []);