How do you pass "more data" to collection "Item" component? #6373
Replies: 1 comment 2 replies
-
Your You should consider looking at the Tabs in React Aria Components and read the React Aria Collections documentation. They are easier to use and would allow you to wrap an If you're only wanting to use the hooks, you could use an inline solution by creating a
|
Beta Was this translation helpful? Give feedback.
-
I am building a custom Design System using react-aria and react-stately hooks. I am confused how "Collections" work. I have read the documentation a couple of times, looked at examples and architecture docs, I am still confused...
Here's an example of a problem I am struggling with while building a custom Tab Navigation component.
In react stately docs it explains that you should use the "Item" component to only "provide data to the parent collection component", the parent component should take care of the rendering, layout, styling etc...
Heres a simple working example of what they provide.
However, my custom Tab Navigation component requires nav buttons to have an optional Icon and a sub-title...
I am confused, how do i pass this additional data? Via the "Item's" component props? TypeScript starts shouting at me for adding unspecified additional props to "Item" if i attempt to do like below...?
What am i missing / not understanding here? 🤔
Am i supposed to create some kind of a wrapper component for Item here with the additional props? 🤔
Like so?
But doing it this way is no longer just "providing data to item" is it not? I am giving a layout now... which is a rendering concern...
What would be the correct way of doing this? 🤔
Thank you.
Beta Was this translation helpful? Give feedback.
All reactions