What I did.
<span className="status">
{isOnline}?{styles.online}: {styles.offline}
</span>
Getting a data from JSON. Need to set a specific styling depending on the value
what i have in CSS module:
.online {
border: 2px solid green;
}
.offline {
border: 2px solid red;
}
Mistake: instead of getting the class value, I am getting the classname
<span className={`${styles.status} ${isOnline ? styles.online : styles.offline}`}>
...
</span>
<span className = {this.state.isOnline ? "status online" : "status offline"} ></span>
class Example extends React.Component {
state = {
isOnline: false
}
handleClick = () => {
this.setState(state => ({
isOnline: !state.isOnline
}))
}
render() {
return (
<div >
< button onClick = {this.handleClick} >
Toggle Online
</button>
<br/>
<span className = {this.state.isOnline ? "status online" : "status offline"} ></span>
</div>
)
}
}
ReactDOM.render( < Example / > , document.getElementById("root"));.online {
border: 2px solid green;
}
.offline {
border: 2px solid red;
}
.status {
display: inline-block;
width: 100px;
height: 100px;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>I would suggest to use classnames library. It helps a lot with conditional class assigning:
<span className={classnames(styles.status, {
[styles.online]: isOnline,
[styles.offline]: !isOnline,
})}>
</span>