How to add multiple classes to a ReactJS Component?
css, ecmascript-6, javascript, reactjs
Solution
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.
Problem
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 & Support <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")); ```