Estoy usando React y una biblioteca de íconos donde encontré estrellas llenas ( FaStar ) y estrellas vacías ( FaRegStar ). Creé una función en la que paso un número (1-5) y, según este valor, mi función debería devolver la cantidad adecuada de estrellas llenas.
const getStars = (rate) => { if (rate <= 1) { return (<> <FaStar /> <FaRegStar /> <FaRegStar /> <FaRegStar /> <FaRegStar /> </> ) } else if (rate <= 2) { return (<> <FaStar /> <FaStar /> <FaRegStar /> <FaRegStar /> <FaRegStar /> </> ) } else if (rate <= 3) { return (<> <FaStar /> <FaStar /> <FaStar /> <FaRegStar /> <FaRegStar /> </> ) } else if (rate <= 4) { return (<> <FaStar /> <FaStar /> <FaStar /> <FaStar /> <FaRegStar /> </> ) } else if (rate <= 5) { return (<> <FaStar /> <FaStar /> <FaStar /> <FaStar /> <FaStar /> </> ) } }Si bien funciona, no se ve bien, ¿tiene alguna idea sobre cómo devolver tantas estrellas llenas como el valor proporcionado?
Puede construir dos matrices y luego renderizarlas; asegúrese de manejar la key correctamente:
const getStars = (rate) => { const faStars = Array.from({length: rate}, (_, index) => <FaStar key={"star" + index} /> ); const faRegStars = Array.from({length: 5 - rate}, (_, index) => <FaRegStar key={"regstar" + index} /> ); return <>{faStars}{faRegStars}</>; };Ejemplo en vivo:
const {Fragment, useState, useEffect} = React; const FaStar = () => <span>★</span>; const FaRegStar = () => <span>☆</span>; const getStars = (rate) => { const faStars = Array.from({length: rate}, (_, index) => <FaStar key={"star" + index} /> ); const faRegStars = Array.from({length: 5 - rate}, (_, index) => <FaRegStar key={"regstar" + index} /> ); // Note: Stack Snippets don't support <> fragments, // only the old verbose kind return <Fragment>{faStars}{faRegStars}</Fragment>; }; const Example = () => { const [stars, setStars] = useState(1); useEffect(() => { const timer = setInterval(() => { setStars(s => (s % 5) + 1); }, 800); return () => { clearInterval(timer); }; }, []); return <div>{getStars(stars)}</div>; }; ReactDOM.render(<Example/>, document.getElementById("root")); <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>He usado dos matrices allí, pero también puede hacerlo con una matriz, como se muestra en moonwave99 . Realmente no importa de ninguna manera en términos del trabajo que se realiza (no es que eso importe con arreglos tan pequeños de todos modos), pero cada enfoque se adapta a un modelo mental diferente.
Puede crear dos matrices, una para <FaStar/> y la otra para <FaRegStar/> ), usando [...Array(rate)] y [...Array(5-rate)] .
Luego asigne ambas matrices usando la función de map y devuelva el componente correspondiente. No olvide agregar key={SOMETHING_UNIQUE} si devuelve una vista dentro de la función de map .
const getStars = (rate) => ( <> { [...Array(rate)].map((item, index) => ( <FaStar key={index}/> )) } { [...Array(5-rate)].map((item, index) => ( <FaRegStar key={index}/> )) } </> )Con solo un bucle:
const getStars = (rate = 0, totStars = 5) => ( <> {Array.from({ length: totStars }, (_, index) => (index >= rate ? <FaRegStar key={`regstar-${index}`} /> : <FaStar key={`star-${index}`}/>) )} </> );