Estoy tratando de crear un componente de calificación básico que se vea así:

◼◼◼◻◻ (puntuación: 3 de 5)

Tengo el siguiente código en JSX:

 var score = 3; var range = 5; { [...Array(range)].map((e, i) => ( <div className="rating-item" data-rating-count={ i + 1 }></div> )) }

esto devuelve el rango pero no muestra el puntaje de calificación:

 ◻ ◻ ◻ ◻ ◻

¿Cómo puedo combinar los valores de score y range y agregar un nombre de clase active a los elementos de calificación?

Estoy tratando de obtener el siguiente HTML:

 <div class="rating-item active" data-rating-count="1"></div> <div class="rating-item active" data-rating-count="2"></div> <div class="rating-item active" data-rating-count="3"></div> <div class="rating-item" data-rating-count="4"></div> <div class="rating-item" data-rating-count="5"></div>

Que generará: ◼◼◼◻◻