How do I get the current tab to be highlighted? - reactjs

Question

I've created a TabHeader which creates a Tab Menu. I want to show table contents based on months, and I've created a loop that runs through the current month and back to January. It is rendered correctly, but the content is changed out dynamically by the API based on the current URL. So, when I change the link/content, then the correct content is loaded, but the current marked Tab is still the first link. I'm using Material UI and would like to use the indicator that's packaged with the Tab component. I'm also coding in Typescript.
I've tried to do some Google searches, but can't seem to find someone with somewhat the same problem as I've got.
This is the TabHeader:
function TabHeader(props) {
const [value, setValue] = React.useState(0);
const { children, header, classes } = props;
function handleChange(event: React.ChangeEvent<{}>, newValue: number) {
setValue(newValue);
}
return (
// Removed for simplicity
<Tabs
value={value}
onChange={handleChange}
indicatorColor="primary"
variant="scrollable"
scrollButtons="auto"
>
{children}
</Tabs>
// Removed for simplicity
);
}
export default withStyles(styles)(TabHeader);
This is the Content Page. Here I've got the Months class which is the render object for my Tab:
class Months extends React.Component {
render() {
const { data } = this.props;
const months = ['January','February','March','April','May','June','July','August','September','October','November','December'];
return (
<Tab
value={data+1}
label={months[new Date(0, 0).getMonth()+data]}
component={Link}
to={`/monthlyTable/${data+1}`}
/>
);
}
}
Then this is the main content that is render on the page:
class MonthlyTable extends React.Component {
state = {
monthlyTable: [],
isLoading: false,
}
componentDidMount() {
// Fetch content from API
}
componentDidUpdate(prevProps) {
if (prevProps.match.params.monthId != this.props.match.params.monthId && this.state.isLoading != true) {
// Re-fetch content from API
}
}
render() {
const month = new Date().getMonth();
const rows = [];
for (var i = month; i >= 0; i--) {
rows.push(<Months key={i} data={i} />);
}
return (
// Removed for simplicity
<TabHeader header={this.state.monthlyTable.Title}>
{rows}
</TabHeader>
{this.state.isLoading ? '' : this.state.monthlyTable.Id && this.state.monthlyTable.Id.length > 0 && <ListTable data={this.state.monthlyTable.Id} />}
{this.state.isLoading ? '' : this.state.monthlyTable.Dates && this.state.monthlyTable.Dates.length > 0 && <ListTable data={this.state.monthlyTable.Dates} />}
// Removed for simplicity
);
}
}
It would be nice to mark the current Tab for user experience, so that you know what content is being showed.

Answer 1

put condition on window.location
if(window.location.pathname === "") then set style or className equal whatever you want to set.
for navbar example:
<ul class="navbar-nav">
<li class={window.location.pathname === "Home" : "nav-item active" ? "nav-item">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
</ul>