How to Update Data from Firebase in React JS
Google's Firebase is a platform for building mobile and online applications. It offers products and services, such as Cloud Firestore, Cloud Functions, Authentication, Hosting, Realtime Database, Cloud Storage, and more, that you can rely on for your app development needs.
Developers may simply store and display user-generated material like photographs and movies that are kept in Google Cloud Storage buckets thanks to the cloud storage service. Users may organise uploaded files and implement access controls as necessary thanks to Firebase Cloud Storage's integration with other Firebase services like Firebase Authentication.
Create a new file in the src
folder called firebase.js
. Copy the configuration code from when we created a Firebase project and paste it in the firebase.js
file.
Export the configuration object with the credentials and use them to launch the Firebase application. A reference that is used to create references in your storage is also exported to the storage service:
import { initializeApp } from 'firebase/app'; import { getFirestore, collection, getDocs } from 'firebase/firestore'; import { getStorage } from "firebase/storage"; const firebaseConfig = { apiKey: "***************************************", authDomain: "playerofcode368712.firebaseapp.com", projectId: "playerofcode-368712", storageBucket: "playerofcode-368712.appspot.com", messagingSenderId: "937825775089", appId: "1:937825775089:web:19f0d7a0fa9bae1910e850" }; const app = initializeApp(firebaseConfig); const db = getFirestore(app); const storage = getStorage(app); const init = { db, storage, app } export default init;
For update data/record from firebase/firestore. We need to import
import {updateDoc, doc} from 'firebase/firestore';
Next we will make a method to remove students record/data from firebase/firestore. Let's see the example
try{ await updateDoc(doc(init.db, "students", student_id),{ name:"Player Of Code", email:"playerofcode@gmail.com", designation:"Software Engineer" }); console.log("Student record updated successfully") } catch(err){ console.log("something went wrong") }