snippetjavascriptreactCritical

How to add multiple classes to a ReactJS Component?

Submitted by: @import:stackoverflow-api·Mar 10, 2026·

Viewed 0 times

multipleclassesreactjsaddhowcomponent

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:

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; (888) 664.6261",
        listClass:"no-mobile last help-support last"
      }*/
    ];

    return (
      
        
          {accountMenuData.map(function(data, index) {
            var activeClass = "";

            if (self.state.focused == index) {
              activeClass = "active";
            }

            return (
              
                
                  {data.name}
                
              
            );
          })}
        
      
    );
  }
});

ReactDOM.render(, document.getElementById("app-container"));

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 ({data.name});
...

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

Code Snippets

...
    var liClasses = classNames({
      'main-class': true,
      'activeClass': self.state.focused === index
    });

    return (<li className={liClasses}>{data.name}</li>);
...

Context

Stack Overflow Q#34521797, score: 312

Revisions (0)

No revisions yet.