How Do I Query current ID against ID's in a collection to show only documents with similar fields and value using react Js and Firestore- Part 2

My goal for this was to fetch all documents that contain a field with the same value... The first time I run my application it shows all similar values from all documents in a collection against current ID, Here's the code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const [data, setData] = useState([]);
const [dataSet, setDataSet] = useState({
regNo: "",
});
const {userId}  = useParams();
let id = userId
useEffect(() => {
let getUserDoc = async (id) => {
let docRef = doc(db, `dentist/${id}`);
let docSnap = await getDoc(docRef);
console.log('getUserDoc() received:', docSnap);
if (docSnap.exists) {
let theData = docSnap.data();
console.log('getUserDoc() setting userInfo:', theData);
setDataSet(theData);
}
}
if (id) {
getUserDoc(id);
console.log("IdUser", id)
} else {
console.log('useEffect() -- no ID value');
}
}, [id]);
let currentValue = dataSet.regNo
console.log("currentvalue from doc", currentValue)
useEffect(()=>{
const getList = async () => {
const collectionRef = collection(db, "dentist")
const q = query(collectionRef, where("regNo", "==", currentValue))
await getDocs(q).then((task)=>{
let medData = task.docs.map((doc) => ({...doc.data(),
id: doc.id}))
setData(medData)
console.log("medData", medData)
}).catch((err) =>{
console.log(err)
})
}
getList()
}, [])

<!-- end snippet -->

This worked 100%, I could compare the regNo from the first document against all the documents in the collection, Here's my console log

The challenge I'm facing now is when I refresh the page, the second useEffect returns 0 in the medData, that is, no document.. Here's my console:-

Once I refresh, the data I could see initially, disappears!

In addition, since I'm using async/await I chained everything together, at first I got all documents with similar value for regNo but when I refreshed, it all disappeared.. Here's the code:-

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

   const [data, setData] = useState([]);
const [dataSet, setDataSet] = useState({
regNo: "",
});
const {userId}  = useParams();
let id = userId
let currentValue = dataSet.regNo
console.log("currentvalue from doc", currentValue)
useEffect(() => {
let getUserDoc = async (id) => {
let docRef = doc(db, `androcare/${id}`);
let docSnap = await getDoc(docRef);
console.log('getUserDoc() received:', docSnap);
if (docSnap.exists) {
let theData = docSnap.data();
console.log('getUserDoc() setting userInfo:', theData);
setDataSet(theData);
}
}
const getList = async () => {
const collectionRef = collection(db, "androcare")
const q = query(collectionRef, where("regNo", "==", currentValue))
await getDocs(q).then((task)=>{
let medData = task.docs.map((doc) => ({...doc.data(),
id: doc.id}))
setData(medData)
console.log("medData", medData)
}).catch((err) =>{
console.log(err)
})
}
if (id) {
getUserDoc(id);
console.log("IdUser", id)
getList();
} else {
console.log('useEffect() -- no ID value');
}
}, [id]);

<!-- end snippet -->

What I'm observing is upon refresh, it treats the regNo as an empty string, how I resolve this issue..

I’m not versed in react.js but I think that you should not put the code of the two queries (first the doc then the collection, as explained in my other answer) in two different useEffect blocks.

You should chain the two queries along the following lines (I let you integrate it in your react.js code, in a unique useEffect block):

let id = userId;
let docRef = doc(db, `dentist/${id}`);
let docSnap = await getDoc(docRef);
if (docSnap.exists) {
  setDataSet(theData);
  const theData = docSnap.data();
  const currentValue = theData.regNo;
  const collectionRef = collection(db, "dentist")
  const q = query(collectionRef, where("regNo", "==", currentValue))
  await getDocs(q).then((task)=>{
  let medData = task.docs.map((doc) => ({...doc.data(), id: doc.id}))
  setData(medData)
});