title: Applying class conditionally in sass/React using ternary operator
body: <p>I am fairly new to sass and React. I did not find this exact question when searching. Any suggestions would be appreciated. I wrote a basic real-time app using React, socket io, node and sass. I am trying to note which users are online/offline. I would like to do this by showing a green or red circle based on if they have active socket connections to a space. To accomplish this, I used a map and a ternary operator. This portions works without issue:</p>
  
  <pre><code>render() {
      console.log(this.props);
      const members = this.props.users.map((user, i) =&gt; {
         console.log(user);
  
          return &lt;li key={i} className={"member-info " + (user.active ? 
  'online' : 'offline')}&gt;                   
                      &lt;h2&gt;{user.username}&lt;div className="circle"&gt;&lt;/div&gt;&lt;/h2&gt;
                      &lt;h4&gt;Joined: {moment(user.joined).format("MMM Do YY")}&lt;/h4&gt;               
                  &lt;/li&gt;
      })
  </code></pre>
  
  <p>The online users have the online class applied and the offline users have the offline class applied. I would like to use this value to determine the fill of the circle (className = circle) in the list below. I have tried several variations and have yet to get it working. So, if the user is online I would like the circle to have a background color of green and if offline, red. Here is my sass code for this portion. Members is the ul and member-info is the li. Any suggestions on how to accomplish the color variation above would be appreciated:</p>
  
  <pre><code>.members{
                  border: 1px solid gray;
                  background-color: royalblue;
                  color: white;
                  max-height: 45%;
                  overflow-y: scroll;
                  .member-info{
                      border: 1px solid gray;
                      padding: 10px;
                      a{
                          text-decoration: none;
                          color: white;
                            a:visited { text-decoration: none; }
                            a:hover { text-decoration: underline; }
                            a:focus { text-decoration: none; }
                            a:hover, a:active { text-decoration: underline; }
  
                      }
                  }
              }
  </code></pre>
  
  <p>Thank you in advance for any suggestions.</p>