I am trying to use a forEach loop to return a component for each item in an array. However, when my react app loads it just returns [Object] over and over again. Why is this and how do I fix it?
Here is the code:
const ProductList = () => {
let product_image;
let product_heading;
let product_listbox_options = "";
info.data.products.edges.forEach((edge) => {
console.log(edge);
const product = edge.node;
product_heading = edge.node.title;
if (
product.media !== undefined &&
product.media.edges !== undefined &&
product.media.length > 0
) {
product.media.edges.forEach((media) => {
if (media.node.mediaContentType === "IMAGE") {
product_image = (
<Thumbnail
source={media.node.image.originalSrc}
alt={product.title}
/>
);
}
});
}
product_listbox_options += (
<Listbox.Option>
<Heading>{product_heading}</Heading>
{product_image}
</Listbox.Option>
);
});
return product_listbox_options;
};
What you are doing here
product_listbox_options += (
<Listbox.Option>
<Heading>{product_heading}</Heading>
{product_image}
</Listbox.Option>
);
is you are adding an empty string value to a react component which results in [Object].
As @tieulinh said you should use .map() instead of .forEach() if you want to return a list/array of components which can be rendered by react.
So your component becomes like this:
const ProductList = () => {
let product_image;
let product_heading;
return (
<>
{info.data.products.edges.map((edge, index) => {
const product = edge.node;
product_heading = edge.node.title;
if (
product.media !== undefined &&
product.media.edges !== undefined &&
product.media.length > 0
) {
product.media.edges.forEach((media) => {
if (media.node.mediaContentType === "IMAGE") {
product_image = (
<Thumbnail
source={media.node.image.originalSrc}
alt={product.title}
/>
);
}
});
}
return (
//Change this key to something meaningful from your edge object
<Listbox.Option key={index}>
<Heading>{product_heading}</Heading>
{product_image}
</Listbox.Option>
);
})}
</>
);
};
Try doing it this way:
console.log(JSON.stringify(edge, null, 2))
ReactJS doesn't work like this
You can use the map method instead of forEach