Question 11743 in Shopify Question posted in
The Shopify help center can be found here.

Why does my array keep outputting [object]? – Shopify

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

3

Answers


  1. 0

    Try doing it this way:

    console.log(JSON.stringify(edge, null, 2))
    Login or Signup to reply.
  2. 0

    ReactJS doesn’t work like this

    You can use the map method instead of forEach

    Login or Signup to reply.
  3. 0

    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>
        );
      })}
    </>
  );
};
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search