How to add multiple classes to a ReactJS Component

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 classNames attribute on each li.

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

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')
);