How to Add Multiple Classes to a Reactjs Component

How to add multiple classes to a ReactJS Component?

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 (<li className={liClasses}>{data.name}</li>);
...

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

How can I add multiple className's to react component?

<div className={`${this.state.className} ${this.props.content.divClassName}`}>

Or if you can't use template strings:

<div className={[this.state.className, this.props.content.divClassName].join(" ")}>

How to add multiple classes in Material UI using the classes props?

you can use string interpolation:

<div className={`${this.props.classes.container} ${this.props.classes.spacious}`}>

Add multiple classes in if statements in React

Use multiple ${}s to interpolate. Make sure to put a space between the } and the ${ next to it.

<div
  className={`timesContainer ${
    index === selectedItemId && selectedItemState ? 'active' : ''
  } ${
    this.checkwidth(slotRow.availableSlots) ? 'responsiveTimes' : ''
  }`}
>

You also might consider defining the class name ahead of time, it might be easier to read in some situations.

const className = `timesContainer ${
  index === selectedItemId && selectedItemState ? 'active' : ''
} ${
  this.checkwidth(slotRow.availableSlots) ? 'responsiveTimes' : ''
}`;

// ...

<div
  className={className}
>

Applying multiple classes to ReactJS component

When you add a className directly to a component, it is passed to that instance of the component as a prop accessible inside the component as this.props.className, and it's up to you to apply that class to actual DOM elements inside your component.

Remember that a React component is not an actual DOM element, but a higher-order logical construct that will be translated into one or several DOM elements (while also adding behavior, etc.). CSS classes only apply to DOM elements.

Using Component Props in multiple classes

You can extract out the course cards props to a central place. May be just a module which exports this data to you. Then use that to render and reuse these props where ever you need.

// course.js
export const CourseData = [
{
   id: 1,
   name: "Senior Development Project II",
   img: SeniorImage 
},
...
]

// App.js

import { CourseData } from './course.js';

...
...
return (
   ...
   {CourseData.map((course) => 
     <CourseCard
        course={course.name}
        img={course.img}
        key={course.id}
       />
   )}
   ...
)

How to add multiple classNames to nextjs elements

As stated in my original comment I have not worked with Next.js.

It appears as though styles is a map of some kind i.e.:

const styles = {
    "projects-pd-subdetails-list": "Class Name A",
    "projects-pd-text": "Class Name B",
    "projects-pd-subdetail": "Class Name C"
}

This means that by using a line similar to styles["projects-pd-text projects-pd-subdetail"] you are attempting to retrieve the value for the key "projects-pd-text projects-pd-subdetail" which does not exist.

I would suggest retrieving the values individually from the map and then joining them together with your choice of string concatenation.

className={styles["projects-pd-subdetail"] + " " + styles["projects-pd-text"]}

// OR

className={`${styles["projects-pd-subdetail"]} ${styles["projects-pd-text"]}`}

---

Related Topics