title: react change the class of list item on click
body: <p>I have a react element like this:</p>
  
  <pre><code>import React, { PropTypes, Component } from 'react'
  
  class AlbumList extends Component {
  
    constructor(props) {
          super(props);
          this.state = {'active': false, 'class': 'album'};
      }
  
    handleClick() {
      if(this.state.active){
        this.setState({'active': false,'class': 'album'})
      }else{
        this.setState({'active': true,'class': 'active'})
      }
    }
  
    render() {
      var album_list
      const {user} = this.props
      if(user.data){
  
          list = user.data.filter(album =&gt; album.photos).map((album =&gt; {
                          return  &lt;div className={"col-sm-3"} key={album.id}&gt;
                          &lt;div className={this.state.class} key={album.id} onClick={this.handleClick.bind(this)}&gt;
                            &lt;div className={"panel-heading"}&gt;{ album.name }&lt;/div&gt;
                            &lt;div className={"panel-body"}&gt;
                              &lt;img className={"img-responsive"} src={album.photo.source} /&gt;
                            &lt;/div&gt;
                                  &lt;/div&gt;
                          &lt;/div&gt;
                           }))
                   }
  
      return (
        &lt;div className={"container"}&gt;
          &lt;div className="row"&gt;
            {list}
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default AlbumList
  </code></pre>
  
  <p>Here <code>map</code> gives the list of <code>filter</code> data as I wanted. Here what I am doing changes the class of all the list element if I click on one. </p>
  
  <p>I am getting the class name from <code>this.state.class</code></p>
  
  <p>How can I change the class of only element that i have clicked.. </p>
  
  <p>Thanks in advance ...</p>