CODEWITHSUNDEEP
javascripthtmlreactjs
user123
user123

Reputation: 69

React js : change css class based on condition

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.

Upvotes: 1

Views: 554

Answers (7)

Dave Bitter
Dave Bitter

Reputation: 101

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()}>
  )
}

Upvotes: 0

Rajat Dhoot
Rajat Dhoot

Reputation: 185

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' : '' }`}>

Upvotes: 0

Dmitriy Kovalenko
Dmitriy Kovalenko

Reputation: 3616

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

Upvotes: 0

Prince Antony P
Prince Antony P

Reputation: 140

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>

Upvotes: 0

Akshay Vijay Jain
Akshay Vijay Jain

Reputation: 15935

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

Upvotes: 2

user8224713
user8224713

Reputation: 41

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

Upvotes: 0

Oluwatobiloba
Oluwatobiloba

Reputation: 13

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>

Upvotes: 1

Related Questions