2

Using this code from the ReactFire tutorial:

import React, { Component, Suspense } from 'react';
import { render } from 'react-dom';

import 'firebase/database';
import { FirebaseAppProvider, useFirestoreDocData, useFirestore, SuspenseWithPerf } from 'reactfire';

const firebaseConfig = {
    //config here
};

async function Burrito() {
  // easily access the Firestore library
  const burritoRef = useFirestore()
    .collection('tryreactfire')
    .doc('burrito');

  // subscribe to a document for realtime updates. just one line!
  const {status, data} = useFirestoreDocData(burritoRef);

  // easily check the loading status
  if (status === 'loading') {
    return <p>Fetching burrito flavor...</p>
  }

  return <p>The burrito is {data.yummy ? 'good' : 'bad'}!</p>;
}

function App() {
  return (
    <FirebaseAppProvider firebaseConfig={firebaseConfig}>
      <h1></h1>
      <Burrito />
    </FirebaseAppProvider>
  );
}

module.exports = App;

I get stuck on "Fetching burrito flavor...". Serving this in an express app. What should I do to get this to update when the data is loaded?

Frank van Puffelen
  • 565,676
  • 79
  • 828
  • 807
yoyobigmanyo
  • 194
  • 8

0 Answers0