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)?

RubenSmn · Accepted Answer · 2023-02-04 15:32:44Z

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

answered Feb 4, 2023 at 15:32

RubenSmn

4,7522 gold badges12 silver badges30 bronze badges

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

3 Comments

Thank you!! I knew the mistake, but I really couldn't correct it

If this is the correct answer you can accpeted it as the answer to help people who might have the same issue in the future @Kocher

sorry, forgot about that