[FIXED] Why does my array keep outputting [object]?

Issue

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;
};

Solution

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>
        );
      })}
    </>
  );
};

Answered By - Aakash Maurya

Answer Checked By - Willingham (PHPFixing Volunteer)