react-daisyui
react-daisyui copied to clipboard
Remove state from Tabs component
Our current <Tabs>
parent component maintains the active tab value in a useState
and passes the value along to all of the child <Tab>
components.
https://github.com/daisyui/react-daisyui/blob/main/src/Tabs/Tabs.tsx
However, this internal state-keeping causes problems when we attempt to control Tabs from the outside using the value
prop. It would be more correct to call the value
prop a defaultValue
since useState does not reload the initial value from props on rerender.
The way I see it, there are couple ways forward with this:
- Add a
useEffect
hook with a dependency on thevalue
prop to update the internal state. (Not a huge fan of this solution) - Remove the internal state entirely, and let the user control the state themselves using the exposed
onChange
prop.
I'll leave the solution up to whoever wants to tackle this. Open to other ideas as well!