Is it possible to make className dynamic in React?

Question

Sass

Good time of the day.
I am working with scss modules and want to dynamically change classes like this:

import classes from './ItemForm.module.scss';
...
<div className={`${classes}.${itemStatus}`}>
     {status}
</div>

Ie itemStatus comes to me, it is different, and there are different classes for it in the scss module. I don't want to make a huge if else construct, is it possible somehow to nest itemStatus dynamically in className?

Answer 1

used the classnames library, see if it helps

Answer 2

It's just an object
classes[“foo”]
classes[itemStatus]

Answer 3

import classes from './ItemForm.module.scss';
const myClasses = [

   {id: 1, className: 'myClass'},
   {id: 2, className: 'myClass2'}

]
<div className={myClasses.map(el => `${el.className} `)}>
     {status}
</div>