Recuperando de firestore:
const [product, setProduct] = useState([]); const getProducts = async () => { const querySnapshot = await getDocs(collection(db, "products")); const arr = []; querySnapshot.forEach((doc) => { arr.push({ ...doc.data(), id: doc.id, }); }); setProduct(arr); }; useEffect(() => { getProducts(); }, []); Tengo este colorMap recuperado de Firestore:
export const data = [ { colorMap: { red: 6, blue: 7, green: 8 }, id: "a4TK38mByQbim4TwOHMY" }, { colorMap: { Black: 20, Gold: 10 }, id: "m08YmrlFxhxLxyc3hVjT" }, { colorMap: { green: 9, red: 19 }, id: "nN2w57SiDovbtQ6EBzGb" } ];¿Cómo puedo mostrarlo en la pantalla?
{product && product.map((index) => ( <> <b>{index.prodName + "-" + index.size + index.cat}</b> <li>{index.id}</li> </> ))}Si agrego esto:
<li>{index.colorMap}</li>Causará un error:
Error no capturado (en promesa): los objetos no son válidos como un niño React (encontrado: objeto con claves {verde, rojo, azul})
¿Cómo resuelvo esto? Cualquier ayuda sería apreciada. Gracias
Puede usar Object.entries() y luego mapear esos elementos como se muestra a continuación:
{product && product.map((index) => ( <div> <b>{index.prodName + "-" + index.size + index.cat}</b> <p>{index.id}</p> <ul> { Object.entries(index.colorMap).map((color) => ( <li>{color[0]} - {color[1]}</li> )) } </ul> </div> ))}