CODEWITHSUNDEEP
javascriptreactjssemantic-uisemantic-ui-react
Adam
Adam

Reputation: 3128

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

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

Upvotes: 0

Views: 895

Answers (1)

Oleksandr Fediashov
Oleksandr Fediashov

Reputation: 4335

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.

Upvotes: 1

Related Questions