react-daisyui icon indicating copy to clipboard operation
react-daisyui copied to clipboard

Remove state from Tabs component

Open benjitrosch opened this issue 2 years ago • 0 comments

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:

  1. Add a useEffect hook with a dependency on the value prop to update the internal state. (Not a huge fan of this solution)
  2. 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!

benjitrosch avatar Sep 23 '22 14:09 benjitrosch