javascript – in React how can I dynamically get the id of each document in my FIREBASE FIRESTORE collection?

I want to be able to filter all products so that each id from the doc relates to my products…

Everything works fine for me so far, but I have only called one document id and I don’t know how to call all the others and give them a filter so that when I click on a certain product, the detail of the correct and related product appears with the id of the useParams()

THE PROBLEM HAPPENS IN THE CALL TO THE FIREBASE ID IN THE ITEMDETAILCONTAINER.JS FILE, I AM ONLY CALLING ONE AND I WANT TO CALL EACH AND RELATE THEM TO THEIR RESPECTIVE PROPERTIES I PUT OF ITEMASIDE.JS AND ITEMDETAIL.JAVE YOU HAVE SOEA WHAT I WANT TO DO

[ITEMDETAILCONTAINER.JS]

import React, { useState, useEffect } from "react";
import { useParams } from "react-router-dom";
import ItemDetail from "../ItemDetail/ItemDetail";
import { PRODUCTS } from "../ItemListContainer/Products";
import Spinner from "../ItemListContainer/Spinner";
import { db } from "../../index";
import {
  getDoc,
  doc,
  getDocs,
  collection,
  Firestore,
} from "firebase/firestore";

const ItemDetailContainer = () => {
  const [jackets, setJackets] = useState([]);
  const [producto, setProducto] = useState([]);
  const { id } = useParams();

 useEffect(() => {
    const singleItem = doc(db, "Products", 'YPQGY4euFdaUcCoDm06C');

    getDoc(singleItem).then((rta) => {
      console.log(rta.data());
      console.log(rta.id);

      setProducto({ ...rta.data(), id: rta.id });
    });
}, https://stackoverflow.com/q/71974961);



console.log(producto);

  return (
    <>
      <div>
        {producto.id ? (
          <>
            <ItemDetail producto={producto} />
          </>
        ) : (
          <div>
            <Spinner />
          </div>
        )}
      </div>
    </>
  );
};

export default ItemDetailContainer;

[ITEMDETAIL.JS]

import React from "react";
import { Link } from "react-router-dom";
import ItemAside from "./ItemAside";
import "./ItemDetail.scss";
import StarRating from "./StarRating";

const ItemDetail = ({ producto }) => {
  return (
    <section className="item__detail">
      <div className="item__detail-single-img">
        <small className="captador">
          <Link
            style={{ textDecoration: "none" }}
            className="captador"
            to={"/"}
          >
            Home
          </Link>
        </small>
        <span className="barra-captador">/</span>
        <small className="subcaptador">
          <Link
            style={{ textDecoration: "none" }}
            className="subcaptador"
            to={`/category/${producto.category}`}
          >
            {producto.category}
          </Link>
        </small>
        <img src={producto.imageUrl} alt="" />
      </div>
      <div className="item__detail-single-pro-details">
        <h5>
          Brand:{" "}
          <a style={{ textDecoration: "none" }} href={producto.page}>
            {producto.brand}
          </a>
        </h5>
        <div className="title-container">
          <h2>{producto.name} </h2>
          <div className="star-container">
            <StarRating />
            <span className="a-choice">
              <span className="choice-ab">
                <span className="choice-ac"> Carvel </span>
                <span className="choice-ad">Choice</span>
              </span>
              <span className="choice-ae"></span>
            </span>
          </div>
        </div>

        <div className="precio-container">
          <small className="small-price">Price: </small>
          <h1>${producto.price}</h1>
        </div>

        <div className="color-container">
          <small className="small-color" style={{ marginRight: "5px" }}>
            Color: {producto.color}
          </small>
        </div>
      </div>
      <ItemAside producto={producto} />
    </section>
  );
};

export default ItemDetail;

[ITEMASIDE.JS]

import React, { useState, useContext } from "react";
import { Link } from "react-router-dom";
import ItemCount from "../ItemCount/ItemCount";
import { CarritoContext } from "../../context/CartContext";

const ItemAside = ({ producto }) => {
  const [quantityCarro, setQuantityCarro] = useState(0);
  const [branded] = useState(producto.brand);

  let { addToCarrito } = useContext(CarritoContext);
  let { setAddToCarrito } = useContext(CarritoContext);
  let { addItem } = useContext(CarritoContext);

  const onAdd = (cantidadCarro) => {
    setQuantityCarro(cantidadCarro);
    setAddToCarrito([
      ...addToCarrito,
      { item: producto, quantity: cantidadCarro },
    ]);
    addItem(producto, cantidadCarro);
  };
  console.log(producto)
  return (
    <div className="container-vertical">
      <aside style={{ width: "100%" }}>
        <div className="container-cuadrado">
          <div>
            <h3>${producto.price}</h3>
          </div>
          <div>
            <p>and FREE Returns</p>
          </div>
          <div>
            <p>
              Delivery for <strong>$39.99</strong>
            </p>
            <p>
              between <strong>17 - 30 April</strong>
            </p>
          </div>
          <div>
            <small>
              <span className="ubicacion"></span> Deliver to Argentina
            </small>
          </div>

          <div>
            {quantityCarro ? (
              <>
                <Link to="/cart">
                  <button className="close zbutton">Finish my purchase</button>
                </Link>
              </>
            ) : (
              <ItemCount
                stock={producto.stock}
                branded={branded}
                initial={0}
                onAdd={onAdd}
              />
            )}
          </div>

          <div>
            <div className="celwidget">
              <div className="a-section a-spacing-small a-text-left celwidget">
                <span className="a-declarative">
                  <span className="aok-align-center">
                    <img
                      alt=""
                      src="https://images-na.ssl-images-amazon.com/images/G/30/x-locale/checkout/truespc/secured-ssl._CB485936936_.png"
                      height="15px"
                    />
                  </span>
                  <span className="a-letter-space"></span>
                  <span
                    className="dataspan"
                    style={{
                      cursor: "pointer",
                      color: "#0099C0",
                    }}
                    data-hover="We work hard to protect your security and privacy. Our payment security system encrypts your information during transmission. We don’t share your credit card details with third-party sellers, and we don’t sell your information to others."
                  >
                    Secure transaction
                  </span>
                </span>
              </div>
            </div>
          </div>
          <div className="info-shipping">
            <div>
              <p>Shipping from</p>
              <p>Sold by</p>
            </div>
            <div>
              <p>Carvel</p>
              <p>Carvel</p>
            </div>
          </div>
          <div className="gift-container">
            <label className="control control--checkbox">
              <input type="checkbox" className="checkgift" />
              <small className="small-gift">
                 Add a gift ticket to facilitate returns
              </small>
            </label>
          </div>
        </div>
      </aside>
    </div>
  );
};

export default ItemAside;

Leave a Comment