CODEWITHSUNDEEP
javascriptreactjscarousel
János
János

Reputation: 35050

Why carousel does not render images? What is wrong with nested map in React?

Something wrong how I populate carousel. There is two loop nested. I use "key" as needed. Nothing is rendered. Do you see what is wrong?

<Carousel
  responsive={responsive}
  ssr
  infinite
  itemClass="carouselItem"
  draggable={true}
  deviceType="desktop"
>
  {Object.keys(props).map(function (organizationId, index) {
    let organization2 = props[organizationId];
    let events = organization2.events;
    return (
      <div key={organizationId}>
        {Object.keys(events).map(function (programId, index) {
          <div key={`${props[organizationId].events[programId].imgId}`}>
            <Image
              src={`http://ticket-t01.s3.eu-central-1.amazonaws.com/${props[organizationId].events[programId].imgId}_0.cover.jpg`}
              className={styles.carouselImage}
              layout="responsive"
              width={865}
              height={513}
              key={`${props[organizationId].events[programId].imgId}`}
              priority={true}
            />
            <div>{props[organizationId].events[programId].name}</div>
            <div>{props[organizationId].name}</div>
          </div>;
        })}
      </div>
    );
  })}
</Carousel>

Strange, it works here when map is not nested:

<Carousel
  responsive={responsive}
  ssr
  infinite
  itemClass="carouselItem"
  draggable={true}
  deviceType="desktop"
>
  {imageUrls &&
    imageUrls.map((url: string, index: number) => (
      <div>
        <Image
          src={url}
          className={styles.carouselImage}
          layout="responsive"
          width={865}
          height={513}
          key={url}
          priority={true}
        />
        <div></div>
        hello
      </div>
    ))}
</Carousel>

Upvotes: 0

Views: 226

Answers (1)

Giorgi Moniava
Giorgi Moniava

Reputation: 28654

   {Object.keys(events).map(function (programId, index) {
          <div key={`${props[organizationId].events[programId].imgId}`}>

In your second map callback, there is no return keyword.

Upvotes: 2

Related Questions