I'm attempting to add the class active if commentBadgeActive is true. The Scholar image should transition from grayscale to colored.
<Paper className={classes.paper}>
<div className={classes.profile}>
<div className="img-collection">
<Tooltip title="Receive 20 likes" arrow>
<div className="achievement">
<img className={`${likeBadgeActive ? "active" : ""}`} src={Fire} alt="monkey" />
<h5>Noble</h5>
</div>
</Tooltip>
<Tooltip title="Receive 10 comments" arrow>
<div className="achievement">
<img className={`${commentBadgeActive ? "active" : ""}`} src={Scholar} alt="monkey" />
<h5>Scholar</h5>
</div>
</Tooltip>
<Tooltip title="Upload 10 memes" arrow>
<div className="achievement">
<img className={`${screamCountActive ? "active" : ""}`} src={Knight} alt="monkey" />
<h5>Contributor</h5>
</div>
</Tooltip>
</div>
</div>
</Paper>
Customization
"& .img-collection": {
display: "flex",
justifyContent: "center",
"& .achievement": {
display: "flex",
justifyContent: "center",
flexDirection: "column",
alignItems: "center",
"& img": {
height: 70,
filter: 'grayscale(100%)'
},
"& active": {
height: 70,
filter: 'grayscale(0%) !important'
},
},
},
Debugging commentBadgeActive
const {
classes,
totalXP,
userLevel,
screamCountActive,
commentBadgeActive,
likeBadgeActive,
profile: { handle, createdAt, imageUrl, bio, website, location, nativeLanguage, learnLanguage }
} = props;
console.log(commentBadgeActive);
The console log returns true, however, the active class does not get applied to the image
Any assistance would be greatly appreciated