We are trying to design a Tab Page using React MUI. We want each Tab to have a child ponent in it. When we add these children ponents to a single page without Tab, there is no problem, but when we add them to the Tab and TabPanel ponents of the MUI, we have a re-render problem. When switching from one tab to another tab, all fields and states in the previous tab are deleted.

I am also adding an example of this.

TabPage ponent :

export default function LabTabs() {
  const [value, setValue] = React.useState('1');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel value="1">
          <Deneme />
        </TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}

We are trying to design a Tab Page using React MUI. We want each Tab to have a child ponent in it. When we add these children ponents to a single page without Tab, there is no problem, but when we add them to the Tab and TabPanel ponents of the MUI, we have a re-render problem. When switching from one tab to another tab, all fields and states in the previous tab are deleted.

I am also adding an example of this.

TabPage ponent :

export default function LabTabs() {
  const [value, setValue] = React.useState('1');

  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  return (
    <Box sx={{ width: '100%', typography: 'body1' }}>
      <TabContext value={value}>
        <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
          <TabList onChange={handleChange} aria-label="lab API tabs example">
            <Tab label="Item One" value="1" />
            <Tab label="Item Two" value="2" />
            <Tab label="Item Three" value="3" />
          </TabList>
        </Box>
        <TabPanel value="1">
          <Deneme />
        </TabPanel>
        <TabPanel value="2">Item Two</TabPanel>
        <TabPanel value="3">Item Three</TabPanel>
      </TabContext>
    </Box>
  );
}

Child ponent :

export default function Deneme() {
  const [value, setValue] = React.useState('1');


  const handleChange = (event: React.SyntheticEvent, newValue: string) => {
    setValue(newValue);
  };

  const [someChecked, setsomeChecked] = React.useState(false);
  const someChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
      setsomeChecked(event.target.checked);
  };

  return (
         <FormControlLabel
                    label="Some Check Name"
                    control={
                        <Checkbox
                            checked={someChecked}
                            onChange={someChanged}
                            inputProps={{ "aria-label": "primary checkbox" }}
                        />}
                />
  );
}

And you can see the problem in StackBlitz, when you check the field that in first tab, and then switch the second tab and e back first tab, checkbox is resetting and the "someChecked" state is revert to default value.

https://stackblitz./edit/react-iari77?file=demo.tsx

So I can't see the problem, if we do not use the child ponent there is no problem, but we have to the use..

• javascript
• reactjs
• material-ui
• tabs

Share Improve this question Follow asked Jun 28, 2022 at 13:33 faksu3442faksu3442 33911 gold badge44 silver badges1111 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

I found the solution. I'm sharing it here for those who have this problem in the future.

We fixed the problem with the CSS trick. We set the display:none style to the condition and that way there was no problem of unmount/mount and re-render.

Sample code :

<TabPanel value={value}>
  {props.tabItems.map((item) =>  
    {return 
      <div style={{ display: item.value == value ? 'block' : 'none' }}> 
        {item.content}
      </div>
    })} 
</TabPanel>

That's the actual behavior when you're managing relevant state in child tab ponent. In order to persist your someChecked state of each child ponent, you've to manage them inside the parent ponent LabTabs.

With your current implementation, when you're moving from one tab to other tab, what actually happens is your previous tab ponent gets unmounted and next tab ponent gets mounted. As a result, all the state resides in your previous tab gets removed. That's why it seems state is removed, when you move back to your previous tab.

To avoid that manage state inside the parent ponent and pass them to the child ponents as props.

Turn the TabPanel and the main ponent separated. In this way the issue will be fixed.

const TabPanel = (props) => {...}
const MainComponent = () =>{.... import the TabPanel, and the tabs}

React MUI