React js : change css class based on condition

Question

I want to give a css class to div based on particular condition. It always takes the last condition.

Here is my code.

I get logos.length as 3

<div className= "${ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' } "> some data </div>

any help would be great.

thank you.

What is that $ character for? Try to remove that.

serkan
– serkan

2017-12-27 10:04:32 +00:00
Commented Dec 27, 2017 at 10:04 — serkan
– serkan, Commented Dec 27, 2017 at 10:04
Your condition seems ok to me.

Serge K.
– Serge K.

2017-12-27 10:04:56 +00:00
Commented Dec 27, 2017 at 10:04 — Serge K.
– Serge K., Commented Dec 27, 2017 at 10:04
@SergeK.. still it is not working.

user123
– user123

2017-12-27 10:11:53 +00:00
Commented Dec 27, 2017 at 10:11 — user123
– user123, Commented Dec 27, 2017 at 10:11

Akshay Vijay Jain · Accepted Answer · 2017-12-27 10:07:53Z

2

< div className = { (this.state.logos && (this.state.logos.length === 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length === 2)) ? 'width_20_percent' : 'width_50_percent' } > some data < /div>

answered Dec 27, 2017 at 10:07

Akshay Vijay Jain

16.3k9 gold badges73 silver badges85 bronze badges

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

13 Comments

Akshay Vijay Jain Over a year ago

whats not working, its working on my system I checked

Akshay Vijay Jain Over a year ago

you must be getting some error, on compile, what's that

user123 Over a year ago

it always takes last condition. as I have 3 logos so 1st condition should execute. but it always takes the 3rd condition which is width_50_percent

Akshay Vijay Jain Over a year ago

then its problem with you this.state.logos, the value is not coming properly, because its working fine on my machine

Akshay Vijay Jain Over a year ago

check what is returned in this.state.logos

|

Serge K. · Accepted Answer · 2017-12-27 10:05:46Z

1

The quotations and the $ symbols are not needed here. Pass your expression directly.

<div className={ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' }> some data </div>

edited Dec 27, 2017 at 10:05

Serge K.

5,3331 gold badge23 silver badges27 bronze badges

answered Dec 27, 2017 at 10:05

Oluwatobiloba

134 bronze badges

2 Comments

user123 Over a year ago

if i remove $ then i get whole syntax in the browser console

Oluwatobiloba Over a year ago

I'm sure you're returning the data -- return(...) .And what does the error say? Also your equality symbol should be === not ==, just a react recommendation though

user8224713 · Accepted Answer · 2017-12-27 10:06:30Z

<div className={ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' }> some data </div>

Prince Antony P · Accepted Answer · 2017-12-27 10:17:16Z

If you are using String Literal ($) then you should replace " with `

<div className= `${ (this.state.logos && (this.state.logos.length == 3)) ? 'width_15_percent' : (this.state.logos && (this.state.logos.length == 2)) ? 'width_20_percent' : 'width_50_percent' }`> some data </div>

Dmitriy Kovalenko · Accepted Answer · 2017-12-27 10:17:54Z

Just a suggestion to use classnames - its really simple but efficiently tool to joining classnames or set by condition

Rajat Dhoot · Accepted Answer · 2017-12-27 11:15:39Z

There is a great Package for Managing classes check here: https://www.npmjs.com/package/classnames/

Its is very easy to use like

First you have to install and then import like

import classNames from 'classnames' <div className={classNames('yourClassName', { width_15_percent: this.state.logos.length == 3})}>

Will apply class "width_15_percent" your condition is true

Or If you dont want to use package then go like

<div className={`yourClassName ${(this.state.logos.length == 3) ? 'width_15_percent' : '' }`}>

Dave Bitter · Accepted Answer · 2017-12-27 18:42:39Z

For the sake of readability create a method that will just return the correct class instead of writing all these double ternary operators. you could do something like this:

getClassName() { let width = null; switch (this.state.logos.length) { case 2: width = 20 break; case 3: width = 15; break; default: width = 50; break; }; return `width_${width}_percent`; } render() { return ( <div className={this.getClassName()}> ) }

Collectives™ on Stack Overflow

React js : change css class based on condition

7 Answers 7

13 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

13 Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

Related