I am using MUI tabs, and I'm having the following error:
MUI: 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.
The code is very similar to the MUI examples which also are generating this same problem
I found a solution, maybe not the best one, but it works
I understood the problem is that the Tabs component try to load its children Tab before they exist. So the idea is to introduce a delay in their generation using setTimeout:
import * as React from 'react';
import Box from '@mui/material/Box';
import Tab from '@mui/material/Tab';
import Tabs from '@mui/material/Tabs';
import Typography from '@mui/material/Typography';
function TabPanel(props) {
const { children, value, index} = props;
return (
value === index && (
<Typography>{children}</Typography>
)
);
}
export default function BasicTabs() {
const [value, setValue] = React.useState(0);
const [activateTab, setActivateTab] = React.useState(false);
setTimeout(()=>{
setActivateTab(true)
},100)
const tabsArr=[
{
label:"Item One",
key: `simple-tab-0`,
},
{
label:"Item Two",
key: `simple-tab-1`,
}
]
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value = {value} onChange = {handleChange}>
{activateTab && (
tabsArr.map((item)=>(
<Tab {...item} />
))
)
}
</Tabs>
</Box>
<TabPanel value={value} index={0}>Item One</TabPanel>
<TabPanel value={value} index={1}>Item Two</TabPanel>
</Box>
);
}
If it don't work, you can try to increase the delay
lol