how to add css classes to a component in react?

Question

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.

Iteration to make a list

var sports = allSports.sportList.map((sport) => {
return (
  <SportItem icon= {sport.colorIcon} text = {sport.name} onClick={this.handleClick()} key= {sport.id}/>
)
})

A single list item

   <div className="display-type icon-pad ">
      <div className="icons link">
        <img className="sport-icon" src={icon}/>
      </div>
      <p className="text-center">{text}</p>
    </div>

I am not able to figure out what to do with handleClick so that If I click on a particular list it gets highlighted.

Answer 1

If you want to highlight the particular list item it's way better to call the handleClick function on the list item itself, and you can add CSS classes more accurately with this approach,

here is my sample code to implement the single list component

var SingleListItem = React.createClass({
getInitialState: function() {
    return {
        isClicked: false
    };
},
handleClick: function() {
    this.setState({
        isClicked: true
    })
},
render: function() {
    var isClicked = this.state.isClicked;
    var style = {
        'background-color': ''
    };
    if (isClicked) {
        style = {
            'background-color': '#D3D3D3'
        };
    }
    return (
        <li onClick={this.handleClick} style={style}>{this.props.text}</li>
    );
  }
});

Answer 2

Keep a separate state variable for every item that can be selected and use classnames library to conditionally manipulate classes as facebook recommends.

Edit: ok, you've mentioned that only 1 element can be selected at a time,it means that we only need to store which one of them was selected (I'm going to use the selected item's id). And also I've noticed a typo in your code, you need to link the function when you declare a component, not call it

<SportItem onClick={this.handleClick} ...

(notice how handleClick no longer contains ()).

And now we're going to pass the element's id along with the event to the handleClick handler using partial application - bind method:

<SportItem onClick={this.handleClick.bind(this,sport.id} ...

And as I said we want to store the selected item's id in the state, so the handleClick could look like:

handleClick(id,event){
this.setState({selectedItemId: id})
...
}

Now we need to pass the selectedItemId to SportItem instances so they're aware of the current selection: <SportItem selectedItemId={selectedItemId} ....Also, don't forget to attach the onClick={this.handleClick} callback to where it needs to be, invoking which is going to trigger the change of the state in the parent:

<div onClick={this.props.onClick} className={classNames('foo', { myClass: this.props.selectedItemId == this.props.key}); // => the div will always have 'foo' class but 'myClass' will be added only if this is the element that's currently selected}>
</div>