Search Filter React Component Display Astro Components.

[still galleon]

Hello everyone, I've got a component that I built in React that acts as a search filter. What I would like to do is use React Search Filter to display cards that I have built as an Astro component (and future Astro components). Is there a way to do this? I know I cannot import Astro components into react or pass children props from React to Astro. I've got to be missing something... Yeah? Thanks in advance.

[vale nacelle]

Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

[dusty ivy]

Handing over the cards as children to the react component should do the trick. I was facing a similar problem, because I forgot to add the client directive client:only='react'.

Edit: I think I misunderstood your question. My searchfilter (written in reactjs) works now, but I am facing the same issue: My astro components used inside the react component do not work anymore.

[dusty ivy]

The documentation shows how you can not pass astro components to other framework components here:
https://docs.astro.build/en/core-concepts/framework-components/#can-i-use-astro-components-inside-my-framework-components

However:

You can, however, use the Astro <slot /> pattern to pass static content generated by Astro components as children to your framework components inside an .astro component.