javascript - Toggle background color of list on click react.js -

i trying create list has following features.

1. on hover change background color of listitem.
2. on click change background color of listitem.
3. toggle background color between clicked elements.[i.e. 1 element in list can have clicked property]

i have executed onhover 1 , 2 features, not able implement 3rd feature. please me solve problem.

thanks in advance.

/** @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 = {                 /* 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 (                 <li onclick={this.clickevent} onmouseenter={this.hoverevent} onmouseleave={this.hoverevent} style={listyle} key={this.props.name}>{this.props.name}</li>             )         }      })       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 <listitem name={data.name} />             })              return (                  <ul style={ulstyle}>                     {list}                 </ul>              )         }      }); 

before looking @ code, think actual cause of problem. in current implementation, each listitem maintains own click_flag state. when 1 listitem clicked, sets own click_flag true, not trigger other listitems reset own click_flag false. cause of problem. solution pass click_flag props parent each listitem. parent's responsibility ensure listitem gets prop true, while others false. likewise, listitem's responsibility notify parent when has been clicked via callback props passed down parent.

so, listitem looks like:

var listitem = react.createclass({     proptypes: {         onclick: react.proptypes.func.isrequired,         isselected: react.proptypes.bool     },     getdefaultprops: function() {         return {             isselected: false         };     },     getinitialstate: function() {         return {             hover_flag: false         };     },     hoverevent: function() {         this.setstate({hover_flag: !this.state.hover_flag});     },     render: function() {         var listyle = {             background: '#cc181e'         };         if (this.props.isselected || this.state.hover_flag) {             listyle['background'] = '#880000';         }         return (             <li                 onclick={this.props.onclick}                 onmouseenter={this.hoverevent}                 onmouseleave={this.hoverevent}                 style={listyle}>{this.props.name}             </li>         );     } }); 

and, parent this:

module.exports = react.createclass({     getinitialstate: function() {         return {             selecteditem: null         };     },     clickhandler: function(idx) {         this.setstate({selecteditem: idx});     },     render: function() {         var ulstyle = {             padding: '0px',             margin: '20px'         };         var items = this.props.data.map(function (item, idx) {             var is_selected = this.state.selecteditem == idx;             return <listitem                 key={item.name}                 name={item.name}                 onclick={this.clickhandler.bind(this, idx)}                 isselected={is_selected}                 />;         }.bind(this));         return (             <ul style={ulstyle}>                 {items}             </ul>         );     } }); 

the parent maintains state variable stores listitem current selected one. uses state in render() pass is_selected = true 1 listitem, , others passed false. parent's state updated clickhandler passed down props each listitem. see example fiddle here