title: How to add multiple classes to a ReactJS Component?
body: <p>I am new to ReactJS and JSX and I am having a little problem with the code below. </p>
  
  <p>I am trying to add multiple classes to the <code>className</code> attribute on each <code>li</code>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;li key={index} className={activeClass, data.class, "main-class"}&gt;&lt;/li&gt;
  </code></pre>
  
  <p>My React component is:</p>
  
  <pre class="lang-jsx prettyprint-override"><code>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;amp; Support &amp;nbsp; &lt;span class='font-awesome icon-support'&gt;&lt;/span&gt;(888) 664.6261",
          listClass:"no-mobile last help-support last"
        }*/
      ];
  
      return (
        &lt;div className="acc-header-wrapper clearfix"&gt;
          &lt;ul className="acc-btns-container"&gt;
            {accountMenuData.map(function(data, index) {
              var activeClass = "";
  
              if (self.state.focused == index) {
                activeClass = "active";
              }
  
              return (
                &lt;li
                  key={index}
                  className={activeClass}
                  onClick={self.clicked.bind(self, index)}
                &gt;
                  &lt;a href="#" className={data.icon}&gt;
                    {data.name}
                  &lt;/a&gt;
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        &lt;/div&gt;
      );
    }
  });
  
  ReactDOM.render(&lt;AccountMainMenu /&gt;, document.getElementById("app-container"));
  </code></pre>