0
175
Views¿Cómo puedo repetir con éxito este valor booleano para generar un producto con menos cantidad de color?
Este es mi firestore con sus siguientes datos. Quiero que mi código verifique si el colorMap, que es la cantidad de color, luego genera el prodName, que es el producto con menos de 10 colores.
![Tienda de fuego][1]
Y este es el error que estoy recibiendo en mi código.
Este es el código. No estoy seguro de si el .filter realmente funciona.
{details.filter(details => details.color < 10).map((val) => { return (<ul> <li key={val.id}><p className="pt-2">{val.prodName} </p></li> </ul> ); })}Esta es mi referencia para obtener los datos en Firebase.
const [details, setDetails] = useState([]); const userData = async () => { const q = query(collection(db, "products")); const querySnapshot = await getDocs(q); const data = querySnapshot.docs.map((doc) => ({ ...doc.data(), id: doc.id, })); setDetails(data); };Si saben cómo hacer esto usando la instrucción if. Por favor remítamelo. Gracias.
·
Juan Pablo Isaza
1 answers
Answer question0
El segundo parámetro en map() es el índice del elemento y no un objeto. Intente utilizar el ID del documento como clave en su lugar:
key={val.id} // instead of {item.id}También debe crear 1 lista y luego agregar elementos de lista usando el mapa en lugar de crear una nueva lista para cada elemento:
<ul> {details.filter((detail) => Object.values(detail.colorMap).find(c => c < 10)).map((val, item) => { return (<li key={val.id}><p className="pt-2">{val.prodName} </p></li>); })} </ul>
·
Juan Pablo Isaza
Report
Answer question