Currently utilizing Material UI alongside React, I have a div element:
<div className={classes.div}></div>
I am attempting to dynamically add a conditional class to it:
<div className={classes.div + divActive ? `${classes.div}__active` : ''}></div>Unfortunately, the second example is not functioning as expected - it consistently displays
<div class="makeStyles-div-2__active"></div>When divActive is false:
<div class="makeStyles-div-2"></div>When divActive is true:
<div class="makeStyles-div-2 makeStyles-div-2__active"></div>Can you help me figure out what could possibly be missing? I attempted enclosing classes.div in an additional template literal like so:
<div className={`${classes.div}` + divActive ? `${classes.div}__active` : ''}></div>However, the outcomes remain unchanged. Interestingly, upon removing the initial class (classes.div), the toggle for divActive appears to be functioning correctly by switching between active and inactive states. This leads me to believe that the issue lies within the first variable - but where exactly is the error?