Me gustaría poder tener un componente de calificación que constara de cinco estrellas como esta donde la clase activa se agrega al elemento de intervalo cuando se hace clic y todos los elementos de intervalo anteriores. (como una calificación de 5 estrellas, solo tendría que hacer clic una vez en el quinto intervalo). La clase activa también debería eliminarse de cualquier intervalo posterior al hacer clic. ¿Cómo puedo conseguir esto?

 <span>*</span> <span>*</span> <span>*</span> <span>*</span> <span>*</span> </div>

// React está cargado y está disponible como React y ReactDOM (no estoy usando importaciones)

 render() { return null; } } document.body.innerHTML = "<div id='root'> </div>"; const rootElement = document.getElementById("root"); ReactDOM.render(<Rating />, rootElement); document.querySelectorAll("span")[2].click(); console.log(document.getElementById("rating").outerHTML);