How to add multiple classes to a ReactJS Component?

In React, adding multiple CSS classes to the same element can be achieved through several common methods:

Using String Concatenation

The simplest and most direct method is to concatenate multiple class names into a string and assign it to the className attribute of the element. For example:

jsx
function MyComponent() {
  return <div className="class1 class2 class3">Hello, world!</div>;
}

If the class names are dynamically computed, you can do the following:

jsx
function MyComponent({ isActive, isDisabled }) {
  const classes = `base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
  return <div className={classes}>Content</div>;
}

Using Arrays and the join Method

If the class names are dynamic or controlled by multiple conditions, you can use an array to collect all the class names that need to be applied, then use the join method to convert the array into a space-separated string:

jsx
function MyComponent({ isActive, isDisabled }) {
  const classList = ['base-class'];

  if (isActive) {
    classList.push('active');
  }

  if (isDisabled) {
    classList.push('disabled');
  }

  const className = classList.join(' ');
  return <div className={className}>Content</div>;
}

Using Template Literals

ES6 introduced template literals, which make it easier to insert variables or expressions into strings. Template literals are enclosed in backticks (`) and use ${} to embed variables or expressions:

jsx
function MyComponent({ isActive, isDisabled }) {
  const className = `base-class ${isActive ? 'active' : ''} ${isDisabled ? 'disabled' : ''}`;
  return <div className={className}>Content</div>;
}

Using Third-Party Libraries

There are third-party libraries that can simplify the conditional combination of class names, such as the classnames library, which can conveniently handle dynamic class names within components. When using the classnames library, you can write:

jsx
import classNames from 'classnames';

function MyComponent({ isActive, isDisabled }) {
  const className = classNames({
    'base-class': true,
    'active': isActive,
    'disabled': isDisabled
  });

  return <div className={className}>Content</div>;
}

The above are several common methods for adding multiple class names to the same element in React. These methods can be chosen based on the actual project requirements and personal preferences.