CODEWITHSUNDEEP
reactjs
spgk
spgk

Reputation: 5

Set Background color to div tag dynamically

I am new to react and trying to set the background color of a div tag in react application. The following code basically gives a different background color when rendered for the following div tag. I am unable to set the value using the following syntax. 

         let month= ["January","February","March","April","May","June","July","August","September","October","November","December"];
         let temp;
         let c = '#d8ef8a !important';

         temp = month.indexOf(this.props.label);
       //  console.log(temp);
         if(temp <= 2)
          c = c;
          else if (temp > 2 && temp <= 5)
          c = '#d8ef8a !important';
          else if (temp > 5 && temp <= 8)
          c = '#ffa77b !important';
          else if(temp > 8)
          c = '#d9bdf6 !important';
          else
          c = '#000 !important';
        // console.log(color);
        return (
            <div  style={{ display: 'flex',justifyContent:'center',alignItems:'center', backgroundColor:c, borderLeft:'solid 1px white',position:'absolute',height:20,left:this.props.left,width:this.props.width}}>
                <div>
                {this.props.label}
                </div>
            </div>)

Upvotes: 0

Views: 326

Answers (2)

J-Cake
J-Cake

Reputation: 1618

I found that removing !important did the trick.

https://codesandbox.io/s/cranky-thunder-nkbnn

Upvotes: 0

Shubham Verma
Shubham Verma

Reputation: 5054

There are two things in this code here. First you dont need the color c variable to itself if it is less than 2 and second you dont need important! for color as it only take one color at a time.

temp = month.indexOf("September");
  //Removed extra condition and important statement
  if (temp > 2 && temp <= 5) c = "#d8ef8a ";
  else if (temp > 5 && temp <= 8) c = "#ffa77b ";
  else if (temp > 8) c = "#d9bdf6 ";
  else c = "#000 ";

Here is working code : https://codesandbox.io/s/jolly-babbage-mcdlf

Upvotes: 1

Related Questions