React module.css add part of class name dynamically

Question

I would like to add a part of a classname dynamicall with modules.css.

My classnames are arrow1, arrow2, arrow3, arrow4. So I would like to change the number at the end dynamically.

className={`${styles.box}` + ' styles.arrow' + id}

I tried it liek this and some other ways, but it never worked. How can I add the number (id)?

Answer 1

You're currently adding a string "styles.arrow1" which does not reference the styles object. Instead you can target your className like so

className={`${styles.box} ` + styles["arrow" + id]}