Change the background in a few hours-CodePudding

Translation results I want to change the background image at specified times and I wrote my code as follows

  return (
  <div className="degree-box" style={
                {
                    backgroundImage: time2 > 19 ? `url(${Night})` ||
                        backgroundImage : time2 > 16 ? `url(${Afternoon})` ||
                            backgroundImage : time2 > 7 ? `url(${Morning})` : null
                }} >
       //code...         
                
  </div>
);

But it gives me back an error that the background does not recognize the second and third images. How can I solve this problem?

CodePudding user response：

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

CodePudding user response：

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