CODEWITHSUNDEEP
reactjsfirebasefirebase-realtime-databasereact-hooks
Henry
Henry

Reputation: 89

Data obtained from Firebase Realtime Database in React Native using Hooks is not displayed on the screen

I started using Hooks in React Native recently and I'm trying to get the data from Firebase Realtime Database and render it in FlatList. The data is being displayed on the console, in object format, but it is not working, it is not being rendered on the screen. What am I doing wrong? How do I make it work correctly?

My code:

import React, { useState, useEffect } from "react";
import { StyleSheet, View, Text, FlatList } from 'react-native';

import firebase from '@firebase/app';
import '@firebase/database';

export default function QuestList({ navigation }) {
  const title = navigation.getParam('title');
  const [data, setData] = useState([]);

  useEffect(() => {
      const db = firebase.database();
      db.ref('/questionnaires/')
        .on('value', snapshot => {
          console.log(snapshot.val());
          const data = snapshot.val();
        });
  }, []);

  return (<FlatList 
    data={data}
    renderItem={
      ({ item, index }) => (<View>
        <Text index={index}>{item.title}</Text>
      </View>)
    }
    keyExtractor={item=>item.id}
    numColumns={2}
    showsVerticalScrollIndicator={false}
    />
  );
}

Upvotes: 0

Views: 352

Answers (1)

SiddAjmera
SiddAjmera

Reputation: 39432

You're probably missing a setData call in your useEffect

useEffect(() => {
  const db = firebase.database();
  db.ref('/questionnaires/')
    .on('value', snapshot => {
      const response = snapshot.val();
      setData(response);
    });
}, []);

Upvotes: 1

Related Questions