Key name in React.js for non-selectable css

Question

I defined a css object inside my render method, but I'm trying to figure out how to make the text unselectable. React.js has its own key names such as backgroundColor instead of background color for css objects. Am I trying to define a key name for non-selectable styles? Example:

render:function(){ var ListItems={ cursor:'pointer', color:'black', marginLeft:'-20px', marginTop:'-10px', marginBottom:'14px', userSelect:'none', } if(this.state.linkHover=='hoverLink'){ ListItems.color='blue'; }else{ ListItems.color='black'; } return ( <div> <li style={ListItems} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onClick={this.onClick}><input type="checkbox" checked={this.state.checked} unselectable="on"/>{this.props.value}</li> </div> ) } 

userSelect doesn't seem to work in Chrome. Is there any other name?

Answer 1

user-select has the following css names:

 -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; 

Accordingly, name the names:

 MozUserSelect:none WebkitUserSelect:none msUserSelect:none 

Each hyphen - and the next character is replaced by an uppercase letter.