How do I prevent React from unloading the content of the previous tab in Semantic UI React?

Question

Say I have this in my app:

import React from 'react'
import { Tab } from 'semantic-ui-react'

const panes = [
  { menuItem: 'Tab 1', render: () => <Tab.Pane>Tab 1 Content</Tab.Pane> },
  { menuItem: 'Tab 2', render: () => <Tab.Pane>Tab 2 Content</Tab.Pane> },
  { menuItem: 'Tab 3', render: () => <Tab.Pane>Tab 3 Content</Tab.Pane> },
]

const TabExampleBasic = () => (
  <Tab panes={panes} />
)

export default TabExampleBasic

Whenever the tab is switched, it's being reloaded from scratch and I am losing all the changes inside the tab that I switched from if I return to it.

What is causing this and how I can keep the changed contents of tabs I switch from?

Tab docs: https://react.semantic-ui.com/modules/tab#tab-example-basic

@azium my form data that is created using react-redux. No local state. — Adam, Aug 09 '17 at 03:22
if the form data is in redux how can you lose it? should be filling the form fields from redux when you switch tabs, no? — azium, Aug 09 '17 at 03:36

Oleksandr Fediashov · Accepted Answer · 2017-08-30T06:33:20.273

1

The state is lost because render function is called on each switch of Tab and it produces new objects. It was originally done for performance tasks. However, if you will use Redux or similar, you won't have this problem.

0.72.0 introduced renderActiveOnly prop, there are examples of usage: simple and shorthand. You can set it to false and all tabs will be rendered.

edited Aug 30 '17 at 06:33

answered Aug 09 '17 at 08:01

Oleksandr Fediashov

4,315
1
24
42

Thanks but I am using redux-form and the form data are lost despite of that. Any idea? – Adam Aug 09 '17 at 17:34
`0.72.0` was released, I've updated answer. Now there is a simple solution for your case – Oleksandr Fediashov Aug 30 '17 at 06:33

How do I prevent React from unloading the content of the previous tab in Semantic UI React?

1 Answers1