how to add css classes to a component in react?
<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>