How to add javascript variable within className - react js

Question

I'm struggling to understand how I can pass through JS variable into className like:

<img className="pos-1 speed-${Math.floor(Math.random() * 10) + 1}" src={Onion1} />

where {Math.floor(Math.random() * 10) + 1} will set a range number so that I can add classes randomly for speed-1 speed-2 etc.

console.log(`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.`);

<img className=`pos-1 speed-${Math.floor(Math.random() * 10) + 1}.` src={Onion1} />

Can anyone help?

Also tried:

const classes = () => {
    return `pos-${Math.floor(Math.random() * 10) + 1} speed-${Math.floor(Math.random() * 10) + 1}.`;
}

<img className={classes} src={Onion1} />

Does this answer your question? How to dynamically add a class to manual class names? — Stucco
– Stucco, Commented Apr 8, 2022 at 17:10

Robin Zigmond · Accepted Answer · 2022-04-08 17:08:59Z

9

Your last attempt is very close, you just forgot to enclose it in {...}:

className={`pos-1 speed-${Math.floor(Math.random() * 10) + 1}`}

Any values passed as attributes/props in React that are not simple string literals need to be enclosed in {...}.

answered Apr 8, 2022 at 17:08

Robin Zigmond

18.3k2 gold badges25 silver badges38 bronze badges

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

Collectives™ on Stack Overflow

How to add javascript variable within className - react js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related