How to Add Multiple Classes to ReactJS Components?

Adding Multiple Classes to ReactJS Components

When working with ReactJS and JSX, you may encounter situations where you need to apply multiple classes to a single component. One common scenario is adding the active class conditionally when an element is focused or clicked.

In your example, you're attempting to add multiple classes to the className attribute of an li element like this:

However, this approach uses the comma operator ,, which only concatenates the strings without adding whitespace. To correctly add multiple classes, you need to use the ES6 template literals feature.

In your AccountMainMenu component, modify the render method as follows:

render: function() {
    // ... existing code

    return (
      <div classname="acc-header-wrapper clearfix">
        <ul classname="acc-btns-container">
          {accountMenuData.map((data, index) => {
            let activeClass = "";

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

            return (
              <li key="{index}" classname="{`${activeClass}" main-class onclick="{this.clicked.bind(self," index>
                <a href="#" classname="{data.icon}">
                  {data.name}
                </a>
              </li>
            );
          })}
        </ul>
      </div>
    );
  }

Now, the className attribute uses template literals to concatenate multiple classes with whitespace. By interpolation the activeClass and data.class variables, you can conditionally apply the desired classes.

This approach allows you to dynamically add and remove classes based on the component's state or props, providing greater flexibility and control over your ReactJS components.

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