Retrieving from 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();
}, []);
I have this colorMap retrieved from 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"
}
];
How can I display it in the screen?
{product &&
product.map((index) => (
<>
<b>{index.prodName + "-" + index.size + index.cat}</b>
<li>{index.id}</li>
</>
))}
If I'll add this:
<li>{index.colorMap}</li>
It will cause an error:
Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {green, red, blue})
How do I resolve this? Any help would be appreciated. Thank you
You can use Object.entries() and then map those items as shown below:
{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>
))}