Hice esta función en React que permite a los usuarios hacer clic en una de 5 estrellas y muestra visualmente cuántas estrellas se "seleccionaron" (un sistema de calificación de 5 estrellas). Esta función está en su propio archivo .js en una aplicación React y devuelve un elemento div que se representa en un archivo .js diferente.

Mi problema es que quiero mostrar en cuántas estrellas hizo clic el usuario (por ejemplo, 3 de 5 estrellas), pero no sé cómo obtener esa información del archivo .js con la función al otro archivo .js donde se representa el elemento div.

¡Cualquier ayuda sería muy apreciada!

 import React, { useState } from "react"; const StarRating = () => { const [rating, setRating] = useState(0); const [hover, setHover] = useState(0); return ( <div className="star-rating"> {[...Array(5)].map((star, index) => { index += 1; return ( <button class="star" type="button" key={index} className={index <= (hover || rating) ? "on" : "off"} onClick={() => setRating(index)} onMouseEnter={() => setHover(index)} onMouseLeave={() => setHover(rating)} > <span className="star">&#9863;</span> </button> ); })} </div> ); }; export default StarRating;