Handle state-management in TabPanels

[TechStudent10]

Is there a way to handle state in the TabPanel component? What I mean by that is, I have a custom component in a TabPanel. That component has its own state. If I switch tabs, the state resets. Is there a way to prevent this?

[Joep van Liempd]

Thanks for the clear question, although it would be better at home on Stack Overflow. 😉 Your component is losing its state because it's unmounted when switching to a different tab. There are two main ways to handle this:

• Use the forceRenderTabPanel (for all tab panels, specified on <Tabs>) or forceRender (for a specific tab panel, specified on <TabPanel>) props, to prevent the component from being unmounted — see the docs at https://github.com/reactjs/react-tabs#forcerendertabpanel-boolean
• Manage all of your component's state outside it, e.g. in a React Context, so it will render with that state again once it is mounted when switching back to it

The first option is the way to go in most cases, unless it gives you performance issues. Hope that helps! Please try Stack Overflow if you have more questions on usage.

[TechStudent10]

okay thanks!