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?