A better way to create a color function in JavaScript?-CodePudding

I'm trying to get the colour of some text to change when the data is greater than 0 and when the data is less than 0. For some reason, it only works sometimes... It will work on the first action but once the data is changed, it will no longer work. Is there a better way to do this?

This is what I currently have...

<div className="QuotePrice" style={{color: data?.quote_data[0].changesPercentage < 0 && "#E73C3C", color: data?.quote_data[0].changesPercentage > 0 && "#44CC2E", gap: "0px"}}>

CodePudding user response：

Your code is quite confusing since you specify color twice in the object. That means only the second one is the actual value of color. The first line color: data?.quote_data[0].changesPercentage < 0 && "#E73C3C" will be completely inactive. You can't have two properties in an object with the same name.

I think you meant to use an if statement:

<div className="QuotePrice" style={{color: data?.quote_data[0].changesPercentage < 0 ? "#E73C3C" : "#44CC2E", gap: "0px"}}>

CodePudding user response：

you can use ternary operator <div className="QuotePrice" style={{color: data?.quote_data[0].changesPercentage < 0 ? "#E73C3C" : "#44CC2E", gap: "0px"}}>