Estoy intentando hacer un filtro de productos. Y los tomo de Firebase. Cuando renderizo la página por primera vez no funciona. Luego, si cambio algo en el Visual Code y guardo, ahí si se guardan los datos y se ven en la pagina. ¿Por que sucede eso? ¿Cómo podría solucionarlo?
Creo que ni siquiera se guardan los datos en el State ya que si hago un console.log de limpieza me muestra un array vacio.
import { useEffect, useState } from "react"
import { getFirestore } from "../firebase"
import Item from "../components/Productos/Item"
function Filtrar(){
const [producto, setProducto] = useState([])
const [limpieza, setLimpieza] = useState([])
const [categ, setCateg] = useState()
useEffect(()=> {
setCateg("limpieza")
const db = getFirestore()
const coleccion = db.collection("productos")
coleccion.get()
.then((res)=> setProducto(res.docs.map((res)=> ({...res.data(), id:res.id}))))
.then(()=> setLimpieza(producto.filter(element=> element.categoria === "limpieza")))
},[])
return (<>
<div className="contenedor-list">
{limpieza.map((producto) => {
return <Item key={producto.id} producto={producto} />})}
</div>
</>)
}
export default Filtrar
pd: es la primera vez que uso esto, no se si con el código que subí es necesario o falta algo más para que me puedan ayudar. Desde ya, muchas gracias.