34 replies

Astro.js map data into components

I have a list of objects I would like to map into components in Astro.

Here's my

Carousel.astro

Carousel.astro

component:

<astro-carousel>
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        items.map((item) => {
          <div class="swiper-slide">
             <CarouselItem title={item.title} description={item.description} />
          </div>;
        })
      }
    </div>
  </div>
  <div class="navigation-buttons">
    <button class="previous-button"></button>
    <button class="next-button"></button>
  </div>
</astro-carousel>

<astro-carousel>
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        items.map((item) => {
          <div class="swiper-slide">
             <CarouselItem title={item.title} description={item.description} />
          </div>;
        })
      }
    </div>
  </div>
  <div class="navigation-buttons">
    <button class="previous-button"></button>
    <button class="next-button"></button>
  </div>
</astro-carousel>

And here is the call inside of

index.astro

index.astro

---
const carouselItems = [
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
];
---

<Carousel items={carouselItems} />

---
const carouselItems = [
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
];
---

<Carousel items={carouselItems} />

However, nothing is being show on my website, and nothing is rendered in the DOM.

In the Astro docs, they have a simple example here (https://docs.astro.build/en/core-concepts/astro-components/):

<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

I thought this would be something really simple, but nothing is working. I've tried to remove my

CarouselItem

CarouselItem

component and just render the

item

item

properties by themselves but even that doesn't render anything in the DOM. I am also sure that my data is available. Am I missing something obvious?

KP-C

Kevin Powell - Community•3y ago•

34 replies

vince

Astro.js map data into components

I have a list of objects I would like to map into components in Astro.

Here's my

Carousel.astro

Carousel.astro

component:

<astro-carousel>
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        items.map((item) => {
          <div class="swiper-slide">
             <CarouselItem title={item.title} description={item.description} />
          </div>;
        })
      }
    </div>
  </div>
  <div class="navigation-buttons">
    <button class="previous-button"></button>
    <button class="next-button"></button>
  </div>
</astro-carousel>

<astro-carousel>
  <div class="swiper">
    <div class="swiper-wrapper">
      {
        items.map((item) => {
          <div class="swiper-slide">
             <CarouselItem title={item.title} description={item.description} />
          </div>;
        })
      }
    </div>
  </div>
  <div class="navigation-buttons">
    <button class="previous-button"></button>
    <button class="next-button"></button>
  </div>
</astro-carousel>

And here is the call inside of

index.astro

index.astro

---
const carouselItems = [
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
];
---

<Carousel items={carouselItems} />

---
const carouselItems = [
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
  {
    title: "Video",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a nulla eget massa sagittis ultricies",
  },
];
---

<Carousel items={carouselItems} />

However, nothing is being show on my website, and nothing is rendered in the DOM.

In the Astro docs, they have a simple example here (https://docs.astro.build/en/core-concepts/astro-components/):

<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>

I thought this would be something really simple, but nothing is working. I've tried to remove my

CarouselItem

CarouselItem

component and just render the

item

item

properties by themselves but even that doesn't render anything in the DOM. I am also sure that my data is available. Am I missing something obvious?

Astro.js map data into components

Astro.js map data into components

Similar Threads

Similar Threads

Similar Threads