I am trying to apply the class active if commentBadgeActive is true.The image Scholar should change from grayscale to coloured.
<Paper className={classes.paper}>
<div className={classes.profile}>
<div className="img-collection">
<Tooltip title="Recieve 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>
Styling
"& .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'
},
},
},
Logging commentBadgeActive
const {
classes,
totalXP,
userLevel,
screamCountActive,
commentBadgeActive,
likeBadgeActive,
profile: { handle, createdAt, imageUrl, bio, website, location, nativeLanguage, learnLanguage }
} = props;
console.log(commentBadgeActive);
The log statement returns true but the active class doesn't get applied to the image
Any help is appreciated
here you forgot to add . before active class:
"& .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'
},
},
},