Trying to implement active tab functionality using router pid
This is how it's done:
function dashboard({ tabId }) {
const classes = useStyles();
const [value, setValue] = React.useState("");
useEffect(() => {
console.log(tabId)
if (tabId) {
setValue(tabId);
}
}, [])
.......
}
Each TabPanel has a custom value that I'm trying to pass as the router parameter (pid)
The pid is obtained through getInitialProps
dashboard.getInitialProps = async ({ query }) => {
if (!query.pid) {
return { tabId: 0 }
}
return { tabId: query.pid }
}
The issue lies in the fact that the tab is set as active but its content is not displayed... Only the tab is marked as active...
Tabs/TabPanel
<Tabs value={value}
onChange={handleChange}
initialSelectedIndex={1}
variant="fullWidth"
aria-label="simple tabs example"
TabIndicatorProps={{
style: {
display:'none',
}
}}
>
<Tab label="HOME" value={0} />
<Tab label="MANAGE COLLECTION" value={1} />
.........
</Tabs>
</AppBar >
<TabPanel value={0} index={0}>
</TabPanel>
<TabPanel value={1} index={1}>
</TabPanel>
......
function TabPanel(props) {
const { children, value, index, ...other } = props;
return (
<div
role="tabpanel"
hidden={value !== index}
id={`simple-tabpanel-${index}`}
aria-labelledby={`simple-tab-${index}`}
{...other}
>
{value === index && (
<Container>
<Box p={3}>
{children}
</Box>
</Container>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.any.isRequired,
value: PropTypes.any.isRequired,
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
Any assistance would be greatly appreciated :)
Issue resolved by juliomalves
The problem was caused because of using string value instead of value={index}