Css module in ReactJS, using in ternary operators syntax-CodePudding

I have a useState and try to render my Modal windows based on it. Here is my code and I used css modules for my classes. The thing is I am not able to find the correct syntax to doing so. I ended up writing this but it does not work.

export default function Modal({ content }) {
  const [showModal, setShowModal] = useState(true);

  return (
    <div className={`${showModal} ? ${styles.ModalWindow} : ${styles.DisplayNone}`} </div>

CodePudding user response：

The backtick (`) symbol indicates a template literal/string in JavaScript. You would only want to use this feature if you want the class to literally be something like "condition ? window-class : hidden".

In this case, you want the expression to be evaluated, not converted into a string literal. So just get rid of those template literal markers:

<div className={showModal ? styles.ModalWindow : styles.DisplayNone} </div>