title: React - Apply **active** class to an element using CSS modules
body: <p>I'm diving into React and I found a little problem managing <em>active</em> class names when using CSS modules.</p>
  
  <p>Suppose I want to develop a Tabs React component. I would like to apply an <em>active</em> class to the current list item. The tab headers is built by the following component:</p>
  
  <pre><code>import React, { Component } from 'react';
  import styles from './Tabs.scss';
  
  export default class TabHeader extends Component {
  
      render() {
          let activeTabIndex = this.props.activeTabIndex;
  
          return (
              &lt;ul className={styles['tabs-header']}&gt;
                  {
                      this.props.data.map((item, index) =&gt; {
                          return (
                              &lt;li key={index}&gt;
                                  &lt;a className={(index === activeTabIndex) ? 'active' : ''} href="#"&gt;
                                      &lt;span&gt;{item.header}&lt;/span&gt;
                                  &lt;/a&gt;
                              &lt;/li&gt;
                          )
                      })
                  }
              &lt;/ul&gt;
          );
      }
  }
  </code></pre>
  
  <p>As you can see, I conditionally added the class <em>active</em> to the interested list item. The stylesheet code is Tabs.scss:</p>
  
  <pre><code>.tabs-header {
      display: table;
      width: 100%;
      list-style-type: none;
  
      &amp; 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);
  
              &amp;:hover {
                  background: #2471A3;
                  color: #F7F9F9;
              }
  
              &amp; span {
                  display: block;
                  transform: skew(40deg);
              }
  
              &amp;.active {
                  background: #2471A3;
              }
          }
      }
  }
  </code></pre>
  
  <p>With this setup, the active item is not using the <em>active</em> css code. How can I solve the problem?</p>
  
  <p>EDIT: the prop <code>activeTabIndex</code> (integer greater than or equal to zero)  is correctly working. If I inspect the elements, I can see the class <code>active</code> 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 <code>className={styles['tabs-header']}</code> in the <code>ul</code> element, this is going to be converted to <code>Tabs__tabs-header__2LSPG</code>.</p>