Невозможно условно установить стиль диапазона в React (css модулей)

Question

Что я сделал.

  <span className="status">
    {isOnline}?{styles.online}: {styles.offline}
  </span>

Получение данных из JSON. Необходимо установить определенный стиль c в зависимости от значения

того, что у меня есть в модуле CSS:

 .online {
  border: 2px solid green;
}

.offline {
  border: 2px solid red;
}

Ошибка: вместо получения значения класса я получаю имя класса

Answer 1

<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>

Answer 2

Я бы посоветовал использовать classnames библиотеку. Это очень помогает при назначении условного класса:

<span className={classnames(styles.status, {
  [styles.online]: isOnline,
  [styles.offline]: !isOnline,
})}>
</span>

Answer 3

<span className={`${styles.status} ${isOnline ? styles.online : styles.offline}`}>
...
</span>