How to add multiple classes to a ReactJS Component?

When styling your React components, you often need to apply multiple classes for different styling states (e.g., btn, btn-primary, active). Although you can rely on template strings or other manual concatenation, React developers commonly use helper methods or libraries like classnames to keep code more readable and maintainable. Below, we’ll outline several approaches.

1. Using Template Strings

A straightforward way is to use template literals (template strings) in JavaScript. For instance:

function MyButton({ isActive }) {
  return (
    <button className={`btn btn-primary ${isActive ? 'active' : ''}`}>
      Click Me
    </button>
  );
}

Here, the class name is built dynamically:

btn btn-primary is always applied.
active is added only if isActive is true.

Why Template Strings Are Useful

Simplicity: They’re part of standard JavaScript, no extra library needed.
Readability: Ternary operators or logical ANDs let you conditionally add or skip classes.

2. Using the `classnames` Library

For more complex conditional logic, you can install the popular classnames library:

npm install classnames

Then use it in your component:

import classNames from 'classnames';

function MyButton({ isActive, isDisabled }) {
  const btnClass = classNames('btn', 'btn-primary', {
    'active': isActive,
    'disabled': isDisabled,
  });

  return (
    <button className={btnClass}>
      Click Me
    </button>
  );
}

How It Works

classnames('btn', 'btn-primary', { 'active': isActive }) checks each key in the object. If the corresponding value is truthy, the key is included in the final string.
Libraries like classnames handle complex scenarios gracefully, such as combining multiple classes and ignoring falsy ones.

3. Inline Conditionals with Logical AND

Another simpler approach is to chain classes with logical AND (&&), especially if you’re only toggling one or two classes:

function MyBadge({ isNew, isFeatured }) {
  return (
    <span className={
      `badge 
       ${isNew && 'badge-new'} 
       ${isFeatured && 'badge-featured'}`
    }>
      Badge Text
    </span>
  );
}

Here:

badge-new gets appended only if isNew is true.
badge-featured gets appended only if isFeatured is true.

4. Keeping Your Code Clean and DRY

When adding multiple classes, especially if some are conditionally applied, your code can quickly become cluttered. To keep it maintainable:

Abstract repeated class logic into a helper function or custom hook.
Use a Library like classnames or clsx to elegantly handle multiple conditional classes.
Avoid Repetition by grouping related styles into a single utility class in your CSS framework or stylesheet.

Leveling Up Your React Skills

Understanding how to apply multiple classes is just one piece of building polished React applications. A strong foundation in JavaScript and React is crucial for tackling everything from performance optimizations to advanced design patterns. If you’re looking to further elevate your skills, check out these resources from DesignGurus.io:

Grokking JavaScript Fundamentals: Perfect for mastering core JavaScript features, making your React code more efficient and bug-free.
Grokking the Coding Interview: Patterns for Coding Questions: Strengthens your problem-solving techniques, ensuring you’re well-prepared for interviews and real-world challenges.

For a more interactive approach, consider Coding Mock Interviews. You’ll practice with ex-FAANG engineers, receive personalized feedback, and sharpen both your coding and communication skills.

Conclusion

To add multiple classes to a React component, you can:

Use Template Strings for straightforward concatenation, perfect for a small set of classes.
Rely on classnames for more complex conditional logic, ensuring clear and concise code.
Use Inline Conditionals with logical AND if you have just a few toggles.

Each approach has its merits, and your choice often depends on complexity and personal preference. Regardless of how you manage classes, always focus on clarity and maintainability to keep your React components organized and scalable. Happy coding!

CONTRIBUTOR

TechGrind