Kevin Powell - CommunityKP-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 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>


And here is the call inside of 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} />


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>


I thought this would be something really simple, but nothing is working. I've tried to remove my CarouselItem component and just render the 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?
Was this page helpful?