#Is it possible to loop through slots?

4 messages · Page 1 of 1 (latest)

uneven gate
#

I've been working my way through this issue and having gotten feedback from others I think I've found a potential solution that could work well for my needs, where the component effectively works the same way in astro and react

So I have a Tab component in react, and the most effective way that it can work in both frameworks seems to be the following

//react
<Tabs
  tabs={['Tab 1', 'Tab 2', 'Tab 3']}
  panels={<>
    <div className='w-full h-12 bg-red-400' />,
    <div className='w-full h-12 bg-blue-400' />,
    <div className='w-full h-12 bg-green-400' />,
  </>}
/>

// Astro
<Tabs tabs={['Tab 1', 'Tab 2', 'Tab 3']} client:load>
  <div className='w-full h-12 bg-red-400' slot='panels' />
  <div className='w-full h-12 bg-blue-400' slot='panels' />
  <div className='w-full h-12 bg-green-400' slot='panels' />
</Tabs>

I would expect these components to be structured the same way, but it seems that while in react I can get panels.props.children which is an array of components I can output using return panels.props.children[index] astro does not return that same functionality.

Instead, astro always seems to merge these components into a single component without keeping the children separate.

Is there any way to get a single child slot out of an array of child slots?

stuck flameBOT
#
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.

uneven gate
#

Bump!

visual fable
#

Bump!