#Astro component passed within client component stops functioning

10 messages · Page 1 of 1 (latest)

odd musk
#

https://ramedia.us/

I have an accordion in the Meet our clients section, and I pass through a swiper js astro component slider through a radix accordion which is a client component. When I default the accordion item to be open it works, but when I close it and reopen the accordion it stops functioning.

My guess is, this is happening because the accordion content is given the hidden attribute and "removed" from the dom, and so when it is opened again the javascript is not re-executed. Thoughts?

Ra Media | Tampa Video Production Agency
sly steppe
#

It's working for me on my end?

odd musk
#

Does this not happen for you after closing it?

sly steppe
#

Oh, I was looking at it on mobile lol.

#

Can you show the block of code?

odd musk
#

This is the Accordion.tsx client component

import React from "react";
import * as Accordion from "@radix-ui/react-accordion";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import styled from "./accordion.module.css";

const HomeAccordion = ({ gary, eric, amel, max, ...props }) => (
  <Accordion.Root
    className={styled.AccordionRoot}
    type='single'
    defaultValue='item-1'
    collapsible
  >
    <Accordion.Item className={styled.AccordionItem} value='item-1'>
      <Accordion.Header>
        <Accordion.Trigger
          className={`${styled.AccordionTrigger} ${styled.TopBorderRadius}`}
        >
          <span>Gary Cardone</span>
          <span>
            <ChevronDownIcon className={styled.Icon} />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content className={styled.AccordionContent}>
        {gary}
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item className={styled.AccordionItem} value='item-2'>
      <Accordion.Header>
        <Accordion.Trigger className={styled.AccordionTrigger}>
          <span>Eric Bosworth</span>
          <span>
            <ChevronDownIcon className={styled.Icon} />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content className={styled.AccordionContent}>
        {eric}
      </Accordion.Content>
    </Accordion.Item>

    <Accordion.Item className={styled.AccordionItem} value='item-3'>
      <Accordion.Header>
        <Accordion.Trigger className={styled.AccordionTrigger}>
          <span>Amel Kilic</span>
          <span>
            <ChevronDownIcon className={styled.Icon} />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content className={styled.AccordionContent}>
        {amel}
      </Accordion.Content>
    </Accordion.Item>
    <Accordion.Item className={styled.AccordionItem} value='item-4'>
      <Accordion.Header>
        <Accordion.Trigger
          className={`${styled.AccordionTrigger} ${styled.BottomBorderRadius}`}
        >
          <span>Max Willet</span>
          <span>
            <ChevronDownIcon className={styled.Icon} />
          </span>
        </Accordion.Trigger>
      </Accordion.Header>
      <Accordion.Content
        className={`${styled.AccordionContent} ${styled.ContentBottomRadius}`}
      >
        {max}
      </Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);

export default HomeAccordion;

And the txt file is the Astro component that consumes Accordion client component (HomeAccordion)

#

It was too long for me to use as a code block 😅

#

HomeShowcase.astro - This is the section

---
import HomeSlider from "./HomeSlider.astro";
import HomeAccordion from "./HomeAccordion/Accordion";
import Video from "./Video.astro";

const videos = [
  {
    src: "https://iframe.mediadelivery.net/embed/100760/2bb99f56-6249-4fc0-88dd-c28ecd4530fe?autoplay=false&loop=false&muted=false&preload=false",
    paddingTop: 177.77777777777777,
    title: "Gary Cardone Showcase",
  },
  {
    src: "https://iframe.mediadelivery.net/embed/100760/b30db62c-03d1-4441-981e-0a62d7341507?autoplay=false&preload=false",
    paddingTop: 177.77777777777777,
    title: "Eric Bosworth Showcase",
  },
  {
    src: "https://iframe.mediadelivery.net/embed/100760/2ec9bbdf-041d-4e48-8ff8-7b48e913db42?autoplay=false&preload=false",
    paddingTop: 177.77777777777777,
    title: "Amel Kilic Showcase",
  },
  {
    src: "https://iframe.mediadelivery.net/embed/100760/974344c6-ad78-40ca-9c09-bbfa8f3c798c?autoplay=false&preload=false",
    paddingTop: 177.77777777777777,
    title: "Max Willet Showcase",
  },
];
---

<script src='../scripts/swiper-init.js'></script> 👈

Local script to the swiper js. Don't think this is the issue since it does work/function

<section>
  <div class='heading-container'>
    <h2>Meet Our Clients</h2>
    <p class='subtitle'>
      A showcase of our work with industry icons and renowned personalities.
    </p>
  </div>
  <HomeAccordion gary eric amel max client:load>
    <div slot='gary' class='gary-flex'>
      <div class='gary-video'>
        <Video
          containerClass='gary-container'
          src={videos[0].src}
          title={videos[0].title}
          paddingTop={videos[0].paddingTop}
        />
      </div>
      <div class='gary-cardone'>
        <span class='badge'>Gary Cardone</span>
        <HomeSlider /> 👈👈👈
        <div class='content'>
          <p>
            We take great pride in having had the opportunity to work with the
            respected entrepreneur, Gary Cardone. Our collaboration involved
            creating a visual journey that encapsulated his dynamic and
            ambitious business activities, ranging from strategic ideation to
            the implementation of vast projects.
          </p>
          // rest of the component