Tengo un número ubicado en result.score . Esencialmente, si el siguiente cálculo {Math.round((result.score / 89).toFixed(2) * 100)} es 0 -> 24 me gustaría hacer el pathColor: en CircularProgressbar rojo, si 25 -> 50 I me gustaría hacerlo amarillo y si es 51 -> 100 me gustaría hacerlo verde. ¿Cuál es la forma más fácil de hacer esto?
const Graph = () => ( <div class="score"> {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> );Gracias.
Puede declarar este cálculo en una nueva constante y luego usar lo siguiente:
const scoreVar = Math.round((result.score / 89).toFixed(2) * 100) pathColor: scoreVar <= 24 ? "orange" : (scoreVar <= 50 ? "yellow" : "green"),Puede hacer que alguna clase sea "roja", "amarilla", "verde" y agregar una de ellas a su barra de progreso según el valor.