This is my firestore database: After useEffect() updated the workouts const, I have access to name and uId only. How can I have access to the document id as well?

import React, { useState, useEffect } from "react";
import "./Workouts.sass";
import Workout from "./Workout";
import firebase from "./firebase";

function Workouts() {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    let user = firebase.auth().currentUser;
    const database = firebase.firestore();
    const unsubscribe = database
      .collection("workouts")
      .where("uId", "==", user.uid)
      .onSnapshot((snapshot) => {
        setWorkouts(snapshot.docs.map((doc) => doc.data()));
      });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <div className="Workouts">
      {workouts.map((workout) => (
        <Workout key={workout.name} workout={workout} />
      ))}
    </div>
  );
}

export default Workouts;

This is my firestore database: After useEffect() updated the workouts const, I have access to name and uId only. How can I have access to the document id as well?

import React, { useState, useEffect } from "react";
import "./Workouts.sass";
import Workout from "./Workout";
import firebase from "./firebase";

function Workouts() {
  const [workouts, setWorkouts] = useState([]);

  useEffect(() => {
    let user = firebase.auth().currentUser;
    const database = firebase.firestore();
    const unsubscribe = database
      .collection("workouts")
      .where("uId", "==", user.uid)
      .onSnapshot((snapshot) => {
        setWorkouts(snapshot.docs.map((doc) => doc.data()));
      });

    return () => {
      unsubscribe();
    };
  }, []);

  return (
    <div className="Workouts">
      {workouts.map((workout) => (
        <Workout key={workout.name} workout={workout} />
      ))}
    </div>
  );
}

export default Workouts;

• javascript
• reactjs
• firebase
• google-cloud-firestore

1 Answer 1

You can use the snapshot doc.id
I like to add id as a property to the object:

snapshot.docs.map((doc) => ({id: doc.id, ...doc.data()}))