React - Apply **active** class to an element using CSS modules - css

Question

I'm diving into React and I found a little problem managing active class names when using CSS modules.
Suppose I want to develop a Tabs React component. I would like to apply an active class to the current list item. The tab headers is built by the following component:
import React, { Component } from 'react';
import styles from './Tabs.scss';
export default class TabHeader extends Component {
render() {
let activeTabIndex = this.props.activeTabIndex;
return (
<ul className={styles['tabs-header']}>
{
this.props.data.map((item, index) => {
return (
<li key={index}>
<a className={(index === activeTabIndex) ? 'active' : ''} href="#">
<span>{item.header}</span>
</a>
</li>
)
})
}
</ul>
);
}
}
As you can see, I conditionally added the class active to the interested list item. The stylesheet code is Tabs.scss:
.tabs-header {
display: table;
width: 100%;
list-style-type: none;
& li {
display: table-cell;
text-align: center;
color: #ECF0F1;
cursor: pointer;
a {
display: block;
padding: 15px;
background: #212F3D;
transition: all .2s ease-in;
transform: skew(-40deg);
&:hover {
background: #2471A3;
color: #F7F9F9;
}
& span {
display: block;
transform: skew(40deg);
}
&.active {
background: #2471A3;
}
}
}
}
With this setup, the active item is not using the active css code. How can I solve the problem?
EDIT: the prop activeTabIndex (integer greater than or equal to zero) is correctly working. If I inspect the elements, I can see the class active being added to the active item list, but it is not pointing to the class defined in Tabs.scss. Just to point this out, when using className={styles['tabs-header']} in the ul element, this is going to be converted to Tabs__tabs-header__2LSPG.

Answer 1

I’d need to try it out to be confident of this, but I think you should be using styles.active instead of 'active’.

Answer 2

this should work<a
className={${index === activeTabIndex && css.active}}
href="#"
{item.header}

Answer 3

Your condition would leave an empty space in a class name because of the condition:
(index === activeTabIndex) ? 'active' : ''
Instead you can do a short-circuit evaluation:
<a className={(index === activeTabIndex) && styles['active']} href="#">
<span>{item.header}</span>
</a>

Answer 4

All about CSS modules in React:
For a className with the dash use: style["upper-level"]
Single word className: style.active
To combine a multiple classNames use: style["upper-level"] + " " + style.active
import style from "./style.module.css";
...
className={
menuOpened
? style["upper-level"] + " " + style.active
: style["upper-level"]
}