Flatlist does not render when pulling data from firestore-CodePudding

Thank you for reading my question. Truly appreciate it!

I have am stuck at the following:

I have some data that resides within Firebase Firestore. I am exporting a function that gets and returns the data. The function is below:

import { collection, query, getDocs, getFirestore } from "firebase/firestore"; 

const db = getFirestore();
const q = query(collection(db, "myData"));
const data = [];

export const getData = async ()=>{
    const querySnapshot = await getDocs(q);
    querySnapshot.forEach((doc) => {
    data.push (doc.data());
});
    return data;
}

In my home component, I have a flatlist that should take the returned data and use it to pass in as a prop to another component and renders that as items on home component. Here is the home component code:

import React, {useEffect, useState, useRef} from 'react'
import { View, Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
import style from './style';
import { Button } from 'react-native-paper';
import OtherComponent from '../../components/OtherComponent'
import { getData } from '../../services/getData';


    export default function Home() {
    
        const [myData, setMyData] = useState(null)
    
        useEffect(() => {
          getData().then(setMyData);
        })
    
    
        const renderOtherComponent = ({data}) =>(
          <View style={{flex: 1}} >
          <OtherComponent title={data.Title}  />
          </View>
        )  
        return (
    
            <SafeAreaView style={style.mainContainer} >
    
            <View style={style.mainContent} >
    
            <FlatList
            data={myData}
            renderItem={renderOtherComponent}
            keyExtractor={data => data.id}
            pagingEnabled
          />
            
            </View>
            
            </SafeAreaView>
        )
    }

So far this is what I have been able to dig out based on the debugging:

1- The getData function does indeed grab the data from firestore and sets the myData state correctly within the useEffect hook.

2- the keyExtractor function extracts the right key and data.id shows the right key when looked into during debugging.

3- When the renderOtherComponent function is called, the data parameter shows undefined and this is where the error is thrown.

Any help would be greatly appreciated!

Thank you

CodePudding user response：

it should be item not data, as mention in docs https://reactnative.dev/docs/flatlist#required-renderitem

// renderItem({ item, index, separators });

const renderOtherComponent = ({item}) => (
<View style={{flex: 1}} >
    <OtherComponent title={item.Title}  />
</View>

)

CodePudding user response：

some errors with your code,which i guess depends on your approach, for renderItem its surely item not data as mentioned by TimeDevs

import React, {useEffect, useState, useRef} from 'react'
import { View, Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
import style from './style';
import { Button } from 'react-native-paper';
import OtherComponent from '../../components/OtherComponent'
import { getData } from '../../services/getData';


    export default function Home() {
    
        const [myData, setMyData] = useState(null)
        
        // also here i dont know why you havent added second param to useEffect. with this it will get called everyTime
       /** useEffect(() => {
          getData().then(setMyData);
        })*/
        
        // instead try this
          useEffect(() => {
          getData().then(setMyData);
        },[])
    
        // changed from data to item
        const renderOtherComponent = ({item}) =>{
        return(
        <View style={{flex: 1}} >
          <OtherComponent title={item.Title}  />
          </View>
        )
          
        }  
        return (
    
            <SafeAreaView style={style.mainContainer} >
    
            <View style={style.mainContent} >
    
            <FlatList
            data={myData}
            renderItem={renderOtherComponent}
            keyExtractor={data => data.id}
            pagingEnabled
          />
            
            </View>
            
            </SafeAreaView>
        )
    }