title: how to add css classes to a component in react?
body: <p>So basically what I am doing is iterating through an array of data and making some kind of list. What I want to achieve here is on clicking on a particular list item a css class should get attached. </p>
  
  <p><strong>Iteration to make a list</strong></p>
  
  <pre><code>var sports = allSports.sportList.map((sport) =&gt; {
  return (
    &lt;SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/&gt;
  )
  })
  </code></pre>
  
  <p><strong>A single list item</strong></p>
  
  <pre><code>   &lt;div className="display-type icon-pad "&gt;
        &lt;div className="icons link"&gt;
          &lt;img className="sport-icon" src={icon}/&gt;
        &lt;/div&gt;
        &lt;p className="text-center"&gt;{text}&lt;/p&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I am not able to figure out what to do with handleClick so that If I click on a particular list it gets highlighted.</p>