Getting document value in react.js firestore

Question

Can u guys tell me how to get all detail in my document from firestore from my Alarm function?

here's my Alarm function:

function Alarm() {
  const dummy = useRef();
  const { uid, displayName } = auth.currentUser;
  const alarmRef = firestore.collection("alarm");
  const query = alarmRef.orderBy("detail");
  const [alarm] = useCollectionData(query, { idField: "id" });
  const [alarmValue, setAlarmValue] = useState("00:00:00 AM");

  const sendAlarm = async (e) => {
    e.preventDefault();

    await alarmRef.add({
      detail: alarmValue,
      displayName,
      uid,
    });
    dummy.current.scrollIntoView({ behavior: "smooth" });
  };

  const stopAlarm = (e) => {
    e.preventDefault();
    document.querySelector(".Sound").pause();
    document.querySelector(".Sound").currentTime = 0;
  };

  const setAlarm = () => {
    var h = document.querySelector(".hours").value;
    var m = document.querySelector(".minutes").value;
    var ap = document.querySelector(".ampm").value;
    var hmap = `${h}:${m}:00 ${ap}`;
    setAlarmValue(hmap);
  };

  return (
    <>
      
        
          {alarm &&
            alarm.map((alr) => (
              
                
              
            ))}
          
        

        
          
          
          
          
          
        
      
    
  );
}

I want to make my detail cannot be submited to firestore if the detail duplicate so i need to get all list of my detail, here's my web: https://clockreivc.web.app/ and if i console.log(alarm) from const [alarm] = useCollectionData(query, { idField: "id" }) I got this: and I tried console.log(alarm.detail) the error came : TypeError: Cannot read property 'detail' of undefined

Rafael Lemos · Accepted Answer

The problem here is that you are getting a list of alarm documents instead of a list of details, which is a field of said document. Also, I would suggest you don't use a useCollectionData hook and instead use a simple SDK call as it could also be generating this issue. So in order to fix it you should do something like this:

const alarmRef = firestore.collection("alarm");
const query = alarmRef.orderBy("detail");
//this is the list you want to use
const details = [];
// not sure you want to use this variable but kept it the example just in case
const [alarms] = query.get().then(function(querySnapshot) {
    querySnapshot.forEach(function(doc) {
        details.push(doc.data().detail);
    }
});

Getting document value in react.js firestore

Answers (2)

Related Questions