How can I do this with sass and react? - reactjs

Question

I have a component that render some buttons in the page.
To style the buttons I am using .scss so the classes looks like this:
className={styles.tag}
and the corresponding scss is like this:
.tagsContainer {
display: flex;
flex-flow: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
.tag {
display: block;
background-color: #f4f4f4;
i {
margin-left: 50px;
font-size: 1.4em;
}
}
I was lookin to this codePen that does what I want but is using normal css: Adding and removing classes
How can I adapt that code to use it with scss nad more exactly with this syntax: {styles.tag}?
Regards
Americo
THIS IS AN UPDATE:
I tested this code:
<div onClick={(e) => { e.stopPropagation(); this.collectTags(tag); }}>
<p className={`${this.state.addClass == true ? styles.tag : ""}`}
># {tag.title} <i className="ms-Icon ms-Icon--CirclePlus"></i></p>
</div>
look closely to the p-tag. this code is changing the style onClick but the problem is that is changing all the p-tags in the compoenent and not only the one that was clicked.

Answer 1

Is that what you want?
class App extends React.Component {
state = {
addButtonClass: false
};
toggleClass = () => {
this.setState({
addButtonClass: !this.state.addButtonClass
});
};
render() {
const { addButtonClass } = this.state;
return (
<div className="App">
<button
className={`button ${addButtonClass ? " button--red" : ""}`}
onClick={this.toggleClass}
>Click me </button>
</div>
);
}
}
style.scss
.button {
font-size: 24px;
color: white;
background-color: green;
&--red {
background-color: red;
}
}

Answer 2

All the style reference does is return a string className, so you can manipulate it just like you would any other string. Here's a generic example:
// this can be any string, even an empty string to start
let testCircleClass = `${cssModule.infoCircle}`;
if(test > 0) {
coursesCircleClass += ` ${cssModule.hasContent}`;
}
So you'd probably need something like:
An event handler for the click event.
A state to handle if this event has been processed.
To then tie the styles.tag to this state, once activated.