1

How could I convert this className:

className={`Tooltip__message Tooltip__message--${position}`}

to a css Module className?

There are two classes, and one concatenates a variable.

Miguel Guarrotxena
  • 11
  • 2
  • 2
    Can you add more details with an example. IN your .module.css files what are the classNames? and what possible values does your position hold? – Pavan Aug 13 '20 at 10:47
  • I'm doing a tooltip React component with a prop you can choose a position, I made with scss and works but when I try to use modules, I can't find the way to convert that className. This is the variable: position?: "top" | "left" | "right" | "bottom" – Miguel Guarrotxena Aug 13 '20 at 11:48

1 Answers1

1

You can either do this, normal JavaScript:

className={'wrapper searchDiv ' + this.state.something}

or the string template version, with backticks:

className={`wrapper searchDiv ${this.state.something}`}

Both types are of course just JavaScript, but the first pattern is the traditional kind.

Anyway, in JSX, anything enclosed in curly brackets is executed as JavaScript, so you can basically do whatever you want there. But combining JSX strings and curly brackets is a no-go for attributes.

Ref to https://stackoverflow.com/a/36209517/10789574

Jenwit Virriya
  • 101
  • 1
  • 7