I am having an odd issue where the first Tab is not displaying right. I had experimented around and added a 2nd tab, which shows up just fine. I basically made the 2nd tab have what I wanted the first tab to have. Since I thought that I might have made a mistake, I deleted the first tab and just had the 2nd tab be the first tab...only for it to not show up. Here is my code:
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
className={classes.tabContainer}
>
<Tab label="Today's Picture" />
<Tab
className={classes.tab}
label="Today's Picture"
component={Link}
onClick={refreshPage}
to="/"
/>
<BasicDatePicker date={props.date} setDate={props.setDate} />
</Tabs>The first tab was me experimenting to see if it would show, the 2nd tab is what I want to show up as the first tab. The odd thing that was happening is that when it wasn't showing my first tab, at least hovering over it made the styling I have set up show, but not hovering over it made it look like nothing was there.
I have copied this code from material UI site and it will work fine try this:
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 && (
<Box sx={{ p: 3 }}>
<Typography>{children}</Typography>
</Box>
)}
</div>
);
}
TabPanel.propTypes = {
children: PropTypes.node,
index: PropTypes.number.isRequired,
value: PropTypes.number.isRequired,
};
function a11yProps(index) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
export default function BasicTabs() {
const [value, setValue] = React.useState(0);
const handleChange = (event, newValue) => {
setValue(newValue);
};
return (
<Box sx={{ width: '100%' }}>
<Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
<Tabs value={value} onChange={handleChange} aria-label="basic tabs example">
<Tab label="Item One" {...a11yProps(0)} />
<Tab label="Item Two" {...a11yProps(1)} />
<Tab label="Item Three" {...a11yProps(2)} />
</Tabs>
</Box>
<TabPanel value={value} index={0}>
Item One
</TabPanel>
<TabPanel value={value} index={1}>
Item Two
</TabPanel>
<TabPanel value={value} index={2}>
Item Three
</TabPanel>
</Box>
);
}
I figured it out, once I changed this:
<Tab
className={classes.tab}
label="Today's Picture"
component={Link}
onClick={refreshPage}
to="/"
/>to this:
<Tab
className={classes.tab}
value="Today's Picture"
label="Today's Picture"
component={Link}
onClick={refreshPage}
to="/"
/>I basically had to add a value line in my Tab. Once I did that, it worked as intended!