I am having trouble rendering data from an array React Native

Question

i can log the data but cant seem to display it, the screen is completely blank. im not getting any errors but still nothing on the screen

import React from 'react';
import { View, StyleSheet, Text } from 'react-native';
import firestore from '@react-native-firebase/firestore';
import { FlatList } from 'react-native-gesture-handler';

export default class StockAdjustmentScreen extends React.Component {
     constructor(props) {
          super(props)
          this.state = {
               stockAdjustments: [],
          }
     }
     componentDidMount() {
          firestore().collection('stockAdjustments')
               .get().then((querySnapshot) => {
                    querySnapshot.forEach((doc) => {
                         this.state.stockAdjustments.push({
                              id: doc.id, ...doc.data()
                         })
                    })
                    console.log(this.state.stockAdjustments)
               })
               .catch((error) => {
                    console.log
                         (error)
               })
     }
     render() {
          let Adjustments = this.state.stockAdjustments.map((val, key) => {
               return (
                    <View key={key}>
                         <FlatList style={styles.texts}>{val.comments}</FlatList>
                    </View>
               )
          })
          return (
               <View>
                    {Adjustments}
               </View>
          )
     }
}

here is the data i am trying to display

Answer 1

You have to use:

this.setState({...})

instead of:

this.state.stockAdjustments.push({...})

in order to trigger ui update.

const stockAdjustments = []

querySnapshot.forEach((doc) => {
    stockAdjustments.push({
        id: doc.id, ...doc.data()
    })
})
this.setState({ stockAdjustments });