Why does my array keep outputting [object]?

Question

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

Does this answer your question? [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Jared Smith, May 23 '22 at 12:49
You're using the same variable reference over and over and updating it so all of your options are pointing at the *same* `product_image`. You haven't posted enough code for us to say why you are getting "[object]" but a good guess is that you're converting an object to a string somewhere along the way `String({}) === "[object Object]"` — Jared Smith, May 23 '22 at 12:50

Aakash Maurya · Accepted Answer · 2022-05-23T13:14:23.937

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

score -1 · Answer 2 · answered May 23 '22 at 12:27

-1

Try doing it this way:

console.log(JSON.stringify(edge, null, 2))

answered May 23 '22 at 12:27

ehutchllew

940
8
14

Sorry maybe I wasn't clear in my question. I meant the return statement returns [object] as text on the page, not the console.log – AlexTWO May 23 '22 at 12:30

score -1 · Answer 3 · answered May 23 '22 at 12:29

-1

ReactJS doesn't work like this

You can use the map method instead of forEach

answered May 23 '22 at 12:29

tieulinh

21
3

1

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community May 23 '22 at 12:31

Why does my array keep outputting [object]?

3 Answers3