I want to connect react and firebase

I have problem with Firebase and React. This problem is after click to my add-data button for adding data to database. I get this console.log

Reference_impl.ts:482 Uncaught TypeError: db._checkNotDeleted is not a function at ref (Reference_impl.ts:482:1) at insertData (Modal.js:44:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:4291:1) at executeDispatch (react-dom.development.js:9041:1) at processDispatchQueueItemsInOrder (react-dom.development.js:9073:1) at processDispatchQueue (react-dom.development.js:9086:1) at dispatchEventsForPlugins (react-dom.development.js:9097:1)

Can you see my misstake. I want to make simple CRUD app.

This is my code.

const ModalOverlay = (props) => {
    const sifraRef = useRef();
    const nazivRef = useRef();
    const detaljiRef = useRef();
    const opisRef = useRef();
    const brojObrokaRef = useRef();
    const napomenaRef = useRef();

    const addNewData = (e) => {
      e.preventDefault();

      let data = {
        sifra: sifraRef.current.value,
        naziv: nazivRef.current.value,
        detalji_dijete: detaljiRef.current.value,
        opis: opisRef.current.value,
        broj_obroka: brojObrokaRef.current.value,
        napomena: napomenaRef.current.value
      };
      const uuid = uid();
      set(ref(firestore, `/${uuid}`), {
        data,
        uuid
      })
      close();
    }

I watched almost all youtube videos, and I can’t solve this problem.

Answer

You are using 'firebase/database' SDK that is used for Firebase Realtime Database. For Firestore, you should use 'firebase/firestore' so that should be:

import { initializeApp } from 'firebase/app'
import { getFirestore } from 'firebase/firestore'

const firebaseConfig = {...} // Firebase web config

const app = initializeApp(firebaseConfig)

export const db = getFirestore(app);

Then import db where required:

import { db } from "../../../firebase"
import { addDoc, collection } from 'firebase/firestore' // <-- not firebase/database

const addNewData = async (e) => {
  e.preventDefault();
  const data = {...};
                
  await addDoc(collection(db, 'messages'), data)
}

This should add a new document in messages collection. Checkout the documentation and this video on Firebase channel for more information.