I want to be able to give a different className when mapping through an array of images like so:
{array.map((step, i) => {
return (
<>
<img className={styles.img`${i}`} />
</>
)
})}
However I keep getting an error on Gatsby: Error in function eval in ...file path and then filepath_module_scss__WEBPACK_IMPORTED_MODULE_1_.default.img is not a function
What syntax error am I doing here? How can I dynamically change classNames if not like this?
I am not sure how your styles look like but maybe that would work:
<img className={styles.img[i]} />
or
<img className={styles[`img${i}`]} />