How to add multiple classes to a ReactJS Component?

Question

I am new to ReactJS and JSX and I am having a little problem with the code below.

I am trying to add multiple classes to the className attribute on each li:

<li key={index} className={activeClass, data.class, "main-class"}></li> 

My React component is:

var AccountMainMenu = React.createClass({   getInitialState: function() {     return { focused: 0 };   },    clicked: function(index) {     this.setState({ focused: index });   },    render: function() {     var self = this;     var accountMenuData = [       {         name: "My Account",         icon: "icon-account"       },       {         name: "Messages",         icon: "icon-message"       },       {         name: "Settings",         icon: "icon-settings"       }     /*{         name:"Help &amp; Support &nbsp; <span class='font-awesome icon-support'></span>(888) 664.6261",         listClass:"no-mobile last help-support last"       }*/     ];      return (       <div className="acc-header-wrapper clearfix">         <ul className="acc-btns-container">           {accountMenuData.map(function(data, index) {             var activeClass = "";              if (self.state.focused == index) {               activeClass = "active";             }              return (               <li                 key={index}                 className={activeClass}                 onClick={self.clicked.bind(self, index)}               >                 <a href="#" className={data.icon}>                   {data.name}                 </a>               </li>             );           })}         </ul>       </div>     );   } });  ReactDOM.render(<AccountMainMenu />, document.getElementById("app-container")); 

Answer 1

I use ES6 template literals. For example:

const error = this.state.valid ? '' : 'error' const classes = `form-control round-lg ${error}` 

And then just render it:

<input className={classes} /> 

One-liner version:

<input className={`form-control round-lg ${this.state.valid ? '' : 'error'}`} /> 

Answer 2

I use classnames when there is a fair amount of logic required for deciding the classes to (not) use. An overly simple example:

...     var liClasses = classNames({       'main-class': true,       'activeClass': self.state.focused === index     });      return (<li className={liClasses}>{data.name}</li>); ... 

That said, if you don't want to include a dependency then there are better answers below.