title: Highlight item onClick - React.js
body: <p>Add underscore to category-item onClick and remove underscore for any other item. Found some answers on how to do this with only two components, a "item-container-component" and "item-components". But i have three components involved. This is what I hope to achieve:</p>
  
  <p><a href="https://i.stack.imgur.com/lQD7O.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lQD7O.png" alt="enter image description here"></a></p>
  
  <p><em>Archive-component (mother component)</em>:</p>
  
  <pre><code>class Archive extends React.Component {
  
    constructor(props){
      super(props);
      this.state = {
        products: [],
        category: "",
        activeIndex: 0
      }
      this.filterHandler = this.filterHandler.bind(this);
    }
  
    filterHandler(tag, index){
      console.log('INDEX: ' + index);
      this.setState({
        category: tag,
        activeIndex: index
      })
    }
  
    componentDidMount(){
      const myInit = {
        method: "GET",
        headers: {
           "Content-Type": "application/json"
        }
      };
  
      fetch("/getProducts", myInit)
        .then((res) =&gt; {
          return res.json();
        })
        .then((data) =&gt; {
          this.setState({products:data});
        })
        .catch(function(err) {
          console.log('ERROR!!! ' + err.message);
        });
    }
  
    render() {
      return (
        &lt;div&gt;
          &lt;Menu /&gt;
          &lt;div className="archive-container"&gt;
            &lt;div className="archive-wrapper"&gt;
              &lt;CategoryContainer
                filterHandler={this.filterHandler}
                products={this.state.products}
                activeIndex={this.state.activeIndex}
              /&gt;
              &lt;br/&gt;&lt;br/&gt;
              &lt;ProductContainer
                products={this.state.category.length
                  ? this.state.products.filter((prod) =&gt; prod.category === this.state.category)
                  : this.state.products.filter((prod) =&gt; prod.category === 'Paint')
                }
              /&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;Footer /&gt;
        &lt;/div&gt;
      );
    };
  };
  </code></pre>
  
  <p><em>Category-container component</em>:</p>
  
  <pre><code>class CategoryContainer extends Component {
  
    render(){
      const categories = [...new Set(this.props.products.map(cat =&gt; cat.category))];
  
      return (
        &lt;div&gt;
          &lt;ul className="filterList"&gt;{
            categories.map((cat, index) =&gt;
              &lt;CategoryItem
                key={index}
                index={index}
                category={cat}
                active={index === this.props.activeIndex}
                handleClick={() =&gt; this.props.filterHandler(cat, index)}
              /&gt;
            )
          }&lt;/ul&gt;
        &lt;/div&gt;
      );
    };
  };
  </code></pre>
  
  <p><em>Category-item component</em>:</p>
  
  <pre><code>class CategoryItem extends Component {
    render(){
      return (
        &lt;div&gt;
          &lt;li
            className={this.props.active ? 'active' : 'category'}
            onClick={this.props.handleClick}
          &gt;
              {this.props.category}
  
          &lt;/li&gt;
        &lt;/div&gt;
      );
    };
  };
  </code></pre>
  
  <p>Yelp! 
  M</p>