'How to update single element in firebase

I fetch all the data from the firebase database, showing it in the list. Then what i want is to update that particular element . How I can update it

I am using Next.js/react.js

Few basic files look like this:

// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app"

import { getFirestore } from "@firebase/firestore"
// 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: "A#########################I",
  authDomain: "clion-project.firebaseapp.com",
  projectId: "clion-project",
  storageBucket: "clion-project.appspot.com",
  messagingSenderId: "8#########",
  appId: "1:86735948933:web:46352###############",
  measurementId: "G-KZG7P8MRW2",
}

// Initialize Firebase
const app = initializeApp(firebaseConfig)
export const db = getFirestore(app)

getting all element code :

 const usersCollectionRef = collection(db, "Patients") 
     const [user, setUsers] = useState([])
      const q = query(usersCollectionRef)
        onSnapshot(q, (QuerySnapshot) => {
          setUsers(
            QuerySnapshot.docs.map((doc) => ({
              id: doc.id,
              data: doc.data(),
            }))
          )
        })

getting all items of a particular element:

const docRef = doc(db, "Patients", "<your element doc id>");
const docSnap = await getDoc(docRef);

if (docSnap.exists()) {
  console.log("Doc data:", docSnap.data());
} else {
  console.log("doc doesn't exists");
}


Solution 1:[1]

To update element in firebase :

import { doc, updateDoc } from "firebase/firestore";
const docRef = doc(db, "Patients", "<your element doc id>");
await updateDoc(docRef , {
      //Values you want to update
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ravi Shankar