Dynamic Filtering using a dropdown element in React

[half sinew]

Hi, I'm trying to implement a page of past events (>100 cards) with the month-year being the filter by which to render that month's events. The data is fetched from a database in Supabase and that's been rendered correctly but I am having troubling with rendering a dropdown filter in jsx and using it's selected value to filter the events rendered accordingly,

Also, are there are other efficient ways to implement this within astro itself? For instance, I was not able to retrieve the selected value for <select> using js <script> at all in .astro. Since astro files get rendered only once upon page load, I don't think it's suitable for this interaction.

This is essentially what I'm to achieve..

[obtuse drift]

first you need to decide if to apply the filter on server side or on client side. I you do it server side, with Astro, you need a page reload when the filter updates. Now if it is client side, doing it in .astro with vanilla js or in the framework, should not be different.

for more advanced client / server state sharing, see https://stackoverflow.com/a/74840400/1324481

[half sinew]

How do I trigger reloading the events? Right now, the selected value only gets logged upon page load.

Thanks for the link, I'll go through it rn.

[obtuse drift]

If you decide to go for Server Sent Events, then it is the server that can decide when to send an updated version like here https://github.com/MicroWebStacks/astro-examples/blob/ffaa43296a9c176be5683ae7c42eff168903b3e1/03_sse-counter/src/pages/api/stream.js#L12 but I do not think this fits a search use case because it always follows a user action, which then could put the filter value and get the data with API and update it client side or put the data then reload the page. The first (client API) makes more sense for multi user experience, also for simple search filter not sure if it really needs a server and not just all client side.

[half sinew]

The roadblock I'm currently facing however is with updating the events listed once a filter change occurs (after the page loads). From what I understand, Astro executes all files at runtime itself.

The question on my mind rn is whether to ditch this and go for React for rendering this particular page and interaction.

Like you said, since it's a dropdown element, it'd have to wait for a user action that's not just a state management (# of options may vary and increase over time.)

[half sinew]

i managed to get this working from client side using EventListeners and innerText. But I'm stuck with another issue now - I can't call an Astro component (<Component {props} />) from js.

I managed to get it till here...
ShowAllEventsIn is the Astro Component I want to call from script but it gets formatted and rendered as a normal HTML tag (<tag></
tag>) when I use innerHTML in place of innerText.

[half sinew]

Also additionally, I have map and filter functions inside ShowAllEventsIn which won't get rendered when sent through innerHTML

[obtuse drift]

You should not need to render a component from js. On client side you can manage visibility with classes.
There's nothing bad in using React, if if works as you want.

[half sinew]

Thanks, I followed your advice and got it working. The tip about toggling visibility helped!