How to change CSS class depending on the value of variable in JavaScript?

Question

I have a variable {this.state.prediction} in JavaScript (ReactJS). I want to change circle color depending on the value of {this.state.prediction}.

In particular, when {this.state.prediction} is equal to 0, then div class="circle", else div class="circleSelected".

How can I implement it?

<div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>[0 - 5] ({this.state.prediction})</p>
   </div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>(5 - 15]</p>
   </div>
   <div class="circle-content">
      <div class="circle"></div>
      <p>(15 - 30]</p>
   </div>
</div>

CSS:

.circle-content {
    width:20%;
    text-align:center;
    float:left;
}

.circle {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
        background: #000;
    border:1px solid #000;
}

.circleSelected {
    display:inline-block;
    width:20%;
    padding-bottom:20%;
    border-radius:60%;
        background: #000;
    border:1px solid #000;
}

.circle-content p {
    font-size:14px;
    color:#fff;
}

Prakash Sharma · Accepted Answer · 2018-11-04 15:40:02Z

2

You can do it with ternary operator like this

<div className={this.state.prediction === 0 ? "circle" : "circleSelected"}></div>

edited Nov 4, 2018 at 15:40

answered Nov 4, 2018 at 15:37

Prakash Sharma

16.7k6 gold badges35 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Sagiv b.g Over a year ago

in react we use className not class (at least in the current version)

Sagiv b.g Over a year ago

@ScalaBoy it may change in the future, there is a shift towards class but for now its className

ScalaBoy Over a year ago

It does not compile

ScalaBoy Over a year ago

<div className={this.state.prediction} === 0 ? "circle" : "circleSelected"></div>       |                                                            ^

ScalaBoy Over a year ago

I get ^ under ===.

|

Rico Kahler · Accepted Answer · 2018-11-05 01:14:30Z

2

The library classnames might help.

It's gives some nice syntax for what you're trying to do:

import React from 'react';
import classNames from 'classnames';


class SomeClass extends React.Component {
  render() {
    <div className={classNames({
      'circle': this.state.prediction === 0,
      'circleSelected': this.state.prediction > 0,
    })}></div>
  }
}

check out the documentation here: https://github.com/JedWatson/classnames#usage-with-reactjs

edited Nov 5, 2018 at 1:14

answered Nov 4, 2018 at 15:40

Rico Kahler

19.6k14 gold badges67 silver badges86 bronze badges

1 Comment

Peter Halligan Over a year ago

you are missing a single quote which will prevent this from working

Tyler · Accepted Answer · 2018-11-04 15:43:47Z

1

First, you shouldn't be using class to assign classes to elements rendered by React. You can read about this in the official Styling and CSS documentation.

Using JSX syntax, you have full access to JavaScript operators and logic. You can conditionally assign className by either passing in a variable that you conditionally assign such as <div className={circleClass}></div> or just writing a ternary inline such as <div className={this.state.prediction ? "circle" : "circleSelected"}></div>.

This situation is pretty common and when you have multiple classes that you want to toggle it can get pretty complicated. There is a nice utility library to assist with this called classnames that you should check out if you see this happening frequently.

answered Nov 4, 2018 at 15:43

Tyler

2,4002 gold badges13 silver badges10 bronze badges

2 Comments

ScalaBoy Over a year ago

What do you mean by <div className={this.state.prediction ? "circle" : "circleSelected"}></div>? I want tp check if this.state.prediction is equal to 0 or 1 or any other numeric value. How can I check this equality?

Tyler Over a year ago

Sorry, that wasn't very complete. You can do any JS logical condition there such as this.state.prediction === 1 ? "circle" : "circleSelected" or this.state.prediction > 0 ? "circle" : "circleSelected". In complicated cases, you can even call a function there such as className={getCircleClass(this.state.prediction)} where getCircleClass returns either "circle" or "circleSelected";

Bruinen · Accepted Answer · 2018-11-04 16:18:02Z

0

For more complex classes list you can make an array, it might look like this:

const classesArray = ["defaultClassName"] //or empty if no default class is required
if(anyCondition) {
    classesArray.push("classToBeAdded")
} else if(anyOtherCondition) {
    classesArray.push("anotherClassToBeAdded")}

Then in JSX you can use:

<div className={classesArray.join(' ')}> 
    Your div text
</div>

answered Nov 4, 2018 at 16:18

Bruinen

1091 silver badge8 bronze badges

Collectives™ on Stack Overflow

How to change CSS class depending on the value of variable in JavaScript?

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related