How Can I Dynamically Add Multiple Classes to a ReactJS Component?

Dynamically Adding Multiple Classes to a ReactJS Component

When working with ReactJS, you may encounter the need to add multiple classes to an element's className attribute. To avoid potential errors or confusion, ES6 template literals provide an elegant solution.

To achieve this, use template literals to enclose the class names within backticks (`) and concatenate them using the " " operator. For example:

const className = `class1 class2 class3`;

In your case, you can modify the render method of your AccountMainMenu component to use template literals:

render() {
  var self = this;
  // ...

  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";
          }

          const className = `${activeClass} ${data.class} main-class`;

          return (
            <li
              key={index}
              className={className}
              onClick={self.clicked.bind(self, index)}
            >
              <a href="#" className={data.icon}>
                {data.name}
              </a>
            </li>
          );
        })}
      </ul>
    </div>
  );
}

This approach ensures that multiple classes are correctly added to the className attribute without the need for complex string manipulation or potential errors.

The above is the detailed content of How Can I Dynamically Add Multiple Classes to a ReactJS Component?. For more information, please follow other related articles on the PHP Chinese website!