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