CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-firestoregoogle-cloud-functions
Saad Shoukat
Saad Shoukat

Reputation: 9

Firestore update using react js

I am workin on react js project with firebase (firestore Database).In project I Get input from user(email,name,address)..I want to update the address and name in firebase using email as key. but dont know.I am using update function and help from google but they gave me error I am very thankful to you.. please help me

Upvotes: 0

Views: 4616

Answers (2)

Gökhan Geyik
Gökhan Geyik

Reputation: 313

./config.js

//Create a config file and export db

import { initializeApp } from 'firebase/app';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
import { getFirestore } from 'firebase/firestore';

const firebaseConfig = {
  apiKey: '',
  authDomain: '',
  projectId: '',
  storageBucket: '',
  messagingSenderId: '',
  appId: '',
  measurementId: '${config.measurementId}',
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = getAuth();
const provider = new GoogleAuthProvider();

export { db, auth, provider };

YourComponent.js

import {useState} from 'react'
import { collection, query, where, getDocs, updateDoc} from "firebase/firestore";
import {db} from './config';

export default function YourComponent(){

const [email,setEmail] = useState('');
const [address,setAddress] = useState('');
const [name,setName]  = useState('');

const updateUser = async () => {
 const userRef = query(collection(db, "users"), where("email", "==", email));
 const findUsers = await getDocs(userRef);
 findUsers.forEach( async (user) => {
  const getUser = doc(db, 'users', user.id);
  await updateDoc(getUser, {
   name: name,
   address: address
  });
 });
}

return <Component />
}

Thank You.

Upvotes: 1

solomon Yunana
solomon Yunana

Reputation: 439

Though i would have prefered more information about this like code snippet of your component so that i can be specific but i will provide you general idea which you can easily use

import React,{useState} from 'react'
import { collection, query, where, getDocs, updateDoc} from "firebase/firestore";



function SomeComponent(){

    const [email,setEmail] = useState('');
    const [address,setAddress] = useState('');
    const [name,setName]  = useState('');

    const UpdateUserInfo = async()=>{
        const q = query(collection(db, "users"), where("email", "==", email));

        const querySnapshot = await getDocs(q);
        let docID = '';
        querySnapshot.forEach((doc) => {
        // if email is you primary key then only document will be fetched so it is safe to continue, this line will get the documentID of user so that we can update it
          docID = doc.id;
        });
        const user = doc(db, "users", docID);

        // Set the "capital" field of the city 'DC'
        await updateDoc(user, {
            name: name,
            address: address
        });
    }


    return (
        <>
         {
         //some ui here that will set email, name and address, and you have to call UpdateUserInfo before it works
         }
        </>
    )
}

Upvotes: 0

Related Questions