score:0

Accepted answer

you can do it by using nested ternary operations.

return (
  <div classname="degree-box" style={
                {
                    backgroundimage: time2 > 19 ? `url(${night})` :
                        ( time2 > 16 ? `url(${afternoon})` : (
                            time2 > 7 ? `url(${morning})` : null ))
                }} >
       //code...
   
  </div>
);

score:0

you don't need to overcomplicate things. as you can see even stackoverflow can't highlight your code as expected, because you already have your property name defined, all you need to supply is a value.

{
    backgroundimage: time2 > 19 ? `url(${night})` :
        time2 > 16 ? `url(${afternoon})` :
        time2 > 7 ? `url(${morning})` : null
}

even shorter to avoid repeating yourself;

{
    backgroundimage: `url(${time2 > 19 ? night : time2 > 16 ? afternoon : time2 > 7 ? morning:null})`
}

Related Query

More Query from same tag