Abunys
Abunys

Reputation: 23

classNames library - returning a classname as interpoalted variable

Trying to setup a conditional for setting the className for a div. The conditional works and I can see the className being assigned to the correct variable in the dev console, but I can not get it to return as an interpolated variable. Any suggestions? I have tried setting the styles in the function without wrapping them in '' also. Here is my code..

const Testingtwo = ({ percent, percenttest }) => {
  let nameChange = classNames({
    "styles.BoostMeterStep": percent === true,
    "styles.filledtwo": percenttest === true
  });
  return <div className={`${nameChange}`}>HERE</div>;
};

Upvotes: 0

Views: 90

Answers (1)

devserkan
devserkan

Reputation: 17608

You have a variable there and you don't need to use ${} in your JS expression again. Use it like that:

return <div className={nameChange}>HERE</div>; 

Upvotes: 1

Related Questions