Add multiple classes in if statements in React

Question

I'm trying to conditionally add a few classes in React like this....

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

But obviously you can't do this multiple times. Any succinct way to do this?

Thanks

CertainPerformance · Accepted Answer · 2021-05-31 01:03:00Z

2

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

answered May 31, 2021 at 1:03

CertainPerformance

373k55 gold badges354 silver badges359 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Suraj Sharma · Accepted Answer · 2021-05-31 03:44:46Z

0

I would recommend using clsx a light weight npm library to conditionally add multiple classnames.

Using complex ternary operators in the template literal can make your code less readable.

clsx Example

import clsx from 'clsx';

const classNames = clsx('timesContainer',{
'active': index === selectedItemId && selectedItemState,
'responsiveTimes': this.checkwidth(slotRow.availableSlots)
}

return (<div className={classNames} />

answered May 31, 2021 at 3:44

Suraj Sharma

8577 silver badges10 bronze badges

1 Comment

Suraj Sharma Over a year ago

Here's a blog post link If you're interested in reading more about conditionally adding classnames in react using clsx

Collectives™ on Stack Overflow

Add multiple classes in if statements in React

2 Answers 2

Comments

clsx Example

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

clsx Example

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related