[FIXED] How to get item.docId so that i can get url for pdf in firestore

Issue

i'm trying to implement pdf viewer from url stored in firestore in react js how i can get item.docId in setPdfUrls please help me out i'm new to react js and web development Where I'm stuck is that I don't understand how to do it please help How to get item.docId so that i can get url for pdf in firestore

`

import React, { useState, useEffect, useContext } from "react";
import { Card, Header, Player } from "../components";
import * as ROUTES from "../constants/routes";
import { FirebaseContext } from "../context/firebase";

import { ref, getDownloadURL } from "firebase/storage";
import { storage } from "../lib/firebase.prod";

import { SelectProfileContainer } from "./profiles";
import { FooterContainer } from "./footer";

export function BrowseContainer({ slides }) {
  
  var [pdfUrls, setPdfUrls] = useState([]);
  const [resume, setResume]=useState(null);

  useEffect(()=>{
    getDownloadURL(ref(storage, 'Resume.pdf')).then((url)=>{
      setResume(url);
    })
  },[]);
 

  const [category, setCategory] = useState("articles");
  const [profile, setProfile] = useState({});
  const [loading, setLoading] = useState(true);
  const [slideRows, setSlideRows] = useState([]);

  const { firebase } = useContext(FirebaseContext);
  const user = firebase.auth().currentUser || {};


  useEffect(() => {
    setTimeout(() => {
      setLoading(false);
    }, 3000);
  }, [profile.displayName]);

  useEffect(() => {
    setSlideRows(slides[category]);
  }, [slides, category]);


  return profile.displayName ? (
    <>
      <Card.Group>
        {slideRows.map((slideItem) => (
          <Card key={`${category}-${slideItem.title.toLowerCase()}`}>
            <Card.Title>{slideItem.title}</Card.Title>
            <Card.Entities>
              {slideItem.data.map((item) => (
                <Card.Item key={item.docId} item={item}>
                  
                  <Card.Meta>
                  <Card.SubTitle>{item.title}</Card.SubTitle>
                  <br/>
                  <br/>
                  </Card.Meta>
                  <Card.Image
                    src={item.image} alt={item.title}/>
                </Card.Item>
              ))}
            </Card.Entities>
            <Card.Feature category={category}>
              <Player>
                <Player.Button />
                <Player.Video src={resume} />
              </Player>
            </Card.Feature>
          </Card>
        ))}
      </Card.Group>
      <FooterContainer />
    </>
  ) : (
    <SelectProfileContainer user={user} setProfile={setProfile} />
  );
}

`

Solution

To get the docId of an item in the slides array, you can use the map method to create a new array containing only the docId values. Here is an example:

const docIds = slides[category].map((slideItem) => slideItem.data.map((item) => item.docId));

This will create a two-dimensional array containing all the docId values for each slide in the specified category. To flatten this array into a single dimension,

you can use the flat method, which is available in newer versions of JavaScript:

const docIds = slides[category].map((slideItem) => slideItem.data.map((item) => item.docId)).flat();

Now you can use the docIds array to get the PDF URLs from Firestore. You can use the docId values to construct a query that retrieves the PDF URLs from the database. For example:

const query = firebase.firestore().collection('pdfs').where('docId', 'in', docIds);
query.get().then((snapshot) => {
  snapshot.forEach((doc) => {
    setPdfUrls((urls) => [...urls, doc.data().url]);
  });
});

This will retrieve all the PDF URLs for the specified docId values and add them to the pdfUrls array. You can then use the pdfUrls array to render the PDFs in your React component.

I hope this helps!!

Answered By - Motaz Hakim
Answer Checked By - - Clifford M. (ReactFix Volunteer)