Hide component that renders a Tabs

user_11758406 0
Viewed 2108

I have a component that renders Tabs component from Material UI 5.0.0-beta.5

There is a case when I set this components display to none.

But, then I get this error -

Material-UI: The value provided to the Tabs component is invalid. The Tab with this value (0) is not part of the document layout. Make sure the tab item is present in the document or that it's not display none.

I understand the error, and I am setting its display to none because but I wanna show and hide the component without re-rendering (because I want the user selections to persist).

Is there a way to fix this error or maybe a better way to do what I am trying to do?

material-ui reactjs
2 Answers

You could try to use visibility: hidden instead

And if you want not to take up the space to the hidden component, set its width and height to 0 and then change them later to show the UI.

visibility: hidden;
width: 0;
height: 0;

And when you want to show it back:

visibility: visible;
width: 100%;
height: 100%;
user_51226150

Instead of tricking with the CSS, what about this?

export default function TabsContainer() {
  const [selectedTab, setSelectedTab] = React.useState(0);

  const handleChange = (event, newTab) => {
    setSelectedTab(newTab);
  };

  const hideTabs = true; // use state or sth

  return (
    <Grid>
      {!hideTabs && (<Tabs
        value={selectedTab}
        onChange={handleChange}
        indicatorColor="primary"
        textColor="primary"
        centered
      >
        <Tab label="Item One" />
        <Tab label="Item Two" />
        <Tab label="Item Three" />
      </Tabs>)
     }
    </Grid>
  );
}

You are scared about the selected state being lost, but that won't happen because the state lives in the TabsContainer.

user_106488650
Related