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

Sergej Klackovskis · Accepted Answer · 2020-09-13 22:57:46Z

2

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 });

edited Sep 13, 2020 at 22:57

answered Sep 13, 2020 at 22:46

Sergej Klackovskis

4532 silver badges7 bronze badges

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

2 Comments

Peter Snee Over a year ago

i have tried this but i am getting a Component Exception, "undefined is not a function(near '...this.state.stockAdjustments.map...') "

Peter Snee Over a year ago

Ah i see, i hadnt made a temp array and was trying to set the state without, thanks

Collectives™ on Stack Overflow

I am having trouble rendering data from an array React Native

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related