Changing colour based on number in React-CodePudding

I've got a number located in result.score. Essentially, if the following calculation {Math.round((result.score / 89).toFixed(2) * 100)} is 0 -> 24 I would like to make the pathColor: in CircularProgressbar red, if 25 -> 50 I would like to make it yellow and if it's 51 -> 100 I would like to make it green. What is the easiest way to do this?

const Graph = () => (
  <div >
    {results.length > 0 && (
      <div>
        {results.map((result) => (
          <CircularProgressbar
            value={result.score}
            text={`${Math.round((result.score / 89).toFixed(2) * 100)}%`}
            styles={buildStyles({
              pathColor: "#2bad60",
              textColor: "#2bad60",
              trailColor: "#0b0c18",
              backgroundColor: "#3e98c7",
            })}
          />
        ))}
      </div>
    )}
  </div>
);

Thank you.

CodePudding user response：

You can declare this calculation in a new constant and then use the following:

const scoreVar = Math.round((result.score / 89).toFixed(2) * 100)

pathColor: scoreVar <= 24 ? "orange" : (scoreVar <= 50 ? "yellow" : "green"),

CodePudding user response：

You can make some class "red", "yellow", "green" and add one of them to your progress bar depending on the value.