0

why this piece of code:

${this._rawImageArray.map((item) => {
          return `
            <div class="swiper-slide">
            <div class="swiper-img">
              <img
                src="${item.imageSrc}"
              />
            </div>
            <div class="metadata">
              <span class="typcn typcn-arrow-sorted-up up" id="popup-toggle" data-imageID=${
                item.imageId
              }></span>
              <div class="text-content">
                ${Images.getImage(item.imageId).then((image) => {
                  return `<p id="name">${image.name}</p>
                   <p id="desc">
                    ${image.description}
                   </p>`;
                })}
              </div>
            </div>
            </div>
          `;
        })}

returning [object Promise] in the DOM? I am a beginner but I thought that after I use .then() the result wouln't be unresolved(unfulfilled?) promise.

When I console.log the result of the async call it prints out correctly.

I have no idea how to do it :D Thanks in advance.

valaj
  • 9
  • 2
  • 2
    When you use `return` inside `then()` a promise that resolves with the returned value is passed to the next `then()` in the promise chain – charlietfl Jan 09 '22 at 18:12
  • If that is react code you need the promise resolved before passing to the dom. Setting state with the resolved data is most common then mapping that in the render – charlietfl Jan 09 '22 at 18:13

0 Answers0