title: How to toggle 'className' dynamically in react.js?
body: <p>I want to set the <code>active</code> class dynamically in react.js but it's not working!
  I'm using the <code>setState()</code> method to change the selected item.</p>
  
  <p>this line of code not work .
  <code>className={selectedCategoryId === item.id ? 'active' : ''}</code></p>
  
  <p>I think the <code>setState()</code> function does not work correctly...</p>
  
  <pre><code>const {open, selectedProduct, productCategory, filteredProducts, selectedCategoryId} = this.state;
  const categoryItems = productCategory.map((item) =&gt;
      &lt;a key={item.id}
         onClick={() =&gt; this.handleFilter(item.id)}
         className={selectedCategoryId === item.id ? 'active' : ''}
         // className={()=&gt;this.isActive(item.id)}
         className="pointer"
      &gt;{item.value}&lt;/a&gt;
  );
  </code></pre>
  
  <p>this does not change the class:</p>
  
  <pre><code>handleFilter = (id) =&gt; {
      const filteredItem = this.state.productList.filter(x =&gt; x.categoryId == id);
      this.setState({filteredProducts: filteredItem, selectedCategoryId: id});  
  }
  </code></pre>
  
  <p>but this change the className correctly when select I all tags:</p>
  
  <pre><code>handleRemoveFilter = () =&gt; {
      this.setState({filteredProducts: this.state.productList, selectedCategoryId: 0});
  }
  //-------------------------------
  &lt;div className="tag-list"&gt;
      &lt;a  onClick={this.handleRemoveFilter}
          className="pointer"
          className={ this.state.selectedCategoryId === 0 ? 'active' : ''}
      &gt;All tags&lt;/a&gt;
      {categoryItems}
  &lt;/div&gt;
  </code></pre>