title: Toggle background color of list on click react.js
body: <p>I am trying to create a list which has following features.</p>
  
  <ol>
  <li>On hover change background color of the listItem.</li>
  <li>On Click change background color of a listItem.</li>
  <li>Toggle background color between clicked elements.[i.e. Only one element in the list can have clicked property]</li>
  </ol>
  
  <p>I have executed onhover 1 and 2 features, but I am not able to implement the 3rd feature. Please help me to solve this problem.</p>
  
  <p>Thanks in advance. </p>
  
  <pre><code>/** @jsx React.DOM */
  
     'use strict'
  
      var React = require('react')
  
  
      var ListItem = React.createClass({
  
          getInitialState: function() {
              return  {hover_flag: false, click_flag: false}
          },
  
          hoverEvent: function() {
              this.setState({hover_flag: !this.state.hover_flag})
          },
  
          clickEvent: function(){
              this.setState({click_flag: true})
          },
  
          render: function() {
              var liStyle = {
                  /* some more class properties */
                  background: '#cc181e',
              }
  
              if(this.state.hover_flag || this.state.click_flag) {
                  liStyle['background'] = '#880000'
              }
  
              if(this.state.click_flag) {
                  liStyle['background'] = '#880000'           
              }
  
              return (
                  &lt;li onClick={this.clickEvent} onMouseEnter={this.hoverEvent} onMouseLeave={this.hoverEvent} style={liStyle} key={this.props.name}&gt;{this.props.name}&lt;/li&gt;
              )
          }
  
      })
  
  
      module.exports = React.createClass({
  
          render: function() {
  
              var ulStyle = {
                  padding: '0px',
                  margin: '20px',
              }
  
              var link = {
                  textDecoration: 'none',
                  color: 'white',
                  cursor: 'pointer'       
              }
  
  
              var list = this.props.data.map(function(data) {
                  /*List of li elements */
                  return &lt;ListItem name={data.name} /&gt;
              })
  
              return (
  
                  &lt;ul style={ulStyle}&gt;
                      {list}
                  &lt;/ul&gt;
  
              )
          }
  
      });
  </code></pre>