I need assistance updating a 'progress' field in a document with an autogenerated ID (using Firestore) every time the progress button is clicked. https://i.stack.imgur.com/hZieN.png
Despite my attempts, nothing seems to work. Here is the method I have been trying:
useEffect(() => {
var user = firebase.auth().currentUser;
var email = user.email;
var documentID = database.collection("ChosenChallenge").doc().id;
database
.collection("Users")
.doc(email)
.collection("ChosenChallenge")
.doc(documentID)
.update({
Progress: percentRange
})
.then(() => {
console.log('added!');
});
}, )and here is the corresponding class:
import React, { useState, useEffect } from "react";
import './newprogressbar.css';
import { firebaseAppAuth, database } from "../firebase";
import firebase from "firebase/app";
export const ProgressBarContainer = (props) => {
let [percentRange, setProgress] = useState(0);
const handleUpdate = () => {
setProgress(percentRange < 99 ? percentRange + 7.14285714 : 100);
props.onChange(percentRange + 7.14285714);
}
const Range = (props) => {
return (
<div className="range" style={{width: `${props.percentRange}%`}}/>
);
};
const ProgressBar = (props) => {
return (
<div className="progress-bar">
<Range percentRange={props.percentRange}/>
</div>
);
};
useEffect(() => {
var user = firebase.auth().currentUser;
var email = user.email;
var documentID = database.collection("ChosenChallenge").doc().id;
database
.collection("Users")
.doc(email)
.collection("ChosenChallenge")
.doc(documentID)
.update({
Progress: percentRange
})
.then(() => {
console.log('added!');
});
}, )
return (
<div id="progresscontainer">
<ProgressBar percentRange={percentRange} />
<button id="updatepic" onClick={handleUpdate}>Daily Update</button>
</div>
);
};If anyone could offer some guidance, it would be greatly appreciated!