How to use firebase database with React

Question

I'm trying to use firebase on a React application for the first time, and I can't really find the right procedure in the documentation.

That is my config.js for firebase (Of course here I have hidden my credentials )

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAnalytics } from "firebase/analytics";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries

// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
  apiKey: "*************************",
  authDomain: "****************",
  databaseURL: "**********************",
  projectId: "**********",
  storageBucket: "***************",
  messagingSenderId: "************",
  appId: "***************",
  measurementId: "***********"
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);

export default app;

in my file App.js i have this :

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router';
import "./App.css";
import Message from "./components/Message";
import MessageEditor from "./components/MessageEditor";

import firebase from './config'

function App(){
  
  const [messages, setMessages] = useState({});
  const [pseudo, setPseudo] = useState(useParams().pseudo)


  useEffect(()=> {
    firebase.syncState('/', {
      context: this,
      state: 'messages'
    })
  })
}

Among the errors I get, one tells me that syncState is not a function!

Are you trying to use re-base? i don't think plain firebase has a function called syncState, and re-base is what pops up when i search for syncState. github.com/tylermcginnis/re-base — Nicholas Tower
– Nicholas Tower, Commented Jan 19, 2022 at 8:06
Yes indeed at the beginning I use re-base but I removed it because it seems not to be compatible with the last versions of firebase, but then I have to remove the syncState, thanks — Péah
– Péah, Commented Jan 19, 2022 at 8:28

k0uh0t · Accepted Answer · 2022-01-19 08:41:02Z

1

Firebase does not have a function called syncState. That's why you got this error.

I think you try to use re-base: https://firebaseopensource.com/projects/tylermcginnis/re-base/.

But it has not been updated so I recommend that you use just plain firebase library.

1 Setup: https://firebase.google.com/docs/web/setup

2 RealtimeDatabase Setup: https://firebase.google.com/docs/database/web/start

answered Jan 19, 2022 at 8:41

k0uh0t

1564 bronze badges

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

Collectives™ on Stack Overflow

How to use firebase database with React

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related