How to display this data from Firestore into my React Native Flatlist

Question

First time using Firestore and React Native.I have a very simple Firestore for a golf league app I'm building for a friend. A player document with 2 fields, golfername and score. I'm just trying to fetch the data and push into golfer state via setGolfer. So far I get the fetched data to appear in console.log(objectsArray), but the fetched objects from firestore that appears into the rendered list is blank, but the golfer info from useState renders fine with all the fields. I have omitted some code to save space. Thanks for any help.

import firestore from '@react-native-firebase/firestore';
export default function App() {
  const [golfer, setGolfer] = useState([
    {golfer: 'dave', score: 50, key: '1'},
    {golfer: 'mike', score: 60, key: '2'},
    {golfer: 'jon', score: 50, key: '3'},
    {golfer: 'red', score: 50, key: '4'},
    {golfer: 'tom', score: 50, key: '5'},
    {golfer: 'jeryD', score: 50, key: '6'},
  ]);


  useEffect(() => {
    getData();
     }, []);

    const getData = () => {
    firestore()
    .collection('Players')
    .get()
    .then(querySnapshot => {
        const objectsArray = [];
        querySnapshot.forEach(player => {
            objectsArray.push(player.data());
        });
        setGolfer([...golfer, ...objectsArray])
});

  };

  const [on, setOn] = useState(false);

  const [events, setEvents] = useState([
    {tourney: 'US OPEN', date: '6/01/2021', teetime: '8am', key: '11'},
    {tourney: 'Caz Park', date: '7/04/2021', teetime: '8am', key: '12'},
    {tourney: 'Pebble Beach', date: '8/11/2021', teetime: '8am', key: '14'},
    {tourney: 'Snooty Bay', date: '9/01/2021', teetime: '8am', key: '15'},
    {tourney: 'Masters', date: '9/21/2021', teetime: '8am', key: '16'},
  ]);

  };

  
      
  };

  return (
    <>
      <TouchableWithoutFeedback>
        <View style={styles.container}>
          <Header />
          <Text onPress={() => setOn(false)}>Standings</Text>
          <Text onPress={() => setOn(true)} style={styles.golfer}>
            Events
          </Text>
          <View style={styles.content}>
            <View style={styles.lables} />
            <Text style={styles.golfer}> Golfer</Text>
            <Text style={styles.rank}>Rank</Text>
            <View style={styles.list}>
              <FlatList
                data={golfer}
                keyExtractor={(item, index) => {
                  return item.key;
                }}
                key={golfer.id}
                renderItem={({item}) => (
                  <TodoItem item={item} pressHandler={pressHandler} />
                )}
              />
              <AddTodo submitHandler={submitHandler} />
            </View>
          </View>
          <View style={styles.content2}>
            <View style={styles.list}>
              <View style={styles.lables}>
                <Text style={styles.event}> Event</Text>
              </View>
              <FlatList
                data={events}
                keyExtractor={(item, index) => {
                  return item.key;
                }}
                key={golfer.key}
                renderItem={({item}) => (
                  <Events item={item} key={item} deleteEvent={deleteEvent} />
                )}
              />
              <AddEvents submitEvent={submitEvent} key={events} />
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    </>
  );
}

Answer 1

I would suggest two things:

1. Remove the objectsArray declaration before the useEffect

2. Update the state only once after iterating through all documents:

    useEffect(() => { getData(); }, []); const getData = () => { firestore().collection('Players').get().then(querySnapshot => { const objectsArray = []; querySnapshot.forEach(player => { objectsArray.push(player.data()); }); setGolfer([...golfer, ...objectsArray]) });