Estoy tratando de crear una aplicación de prueba que al final de cada ronda crea una tabla que contiene la puntuación de los jugadores, así como la puntuación de un número determinado de jugadores aleatorios. Digamos que el número de jugadores aleatorios ha sido preseleccionado y es 4. ¿Cómo uso el valor de 4 de useState para representar el siguiente HTML 4 veces? No pude hacer funcionar for loop, ¿quizás alguien más pueda o tenga otra idea?
function Players () { return <><tbody> <tr> <td>{teamName}</td> <td class="space"></td> <td>{score}</td> </tr> </tbody></> }Puede crear una matriz de la longitud deseada usando Array.from y llenarla con el componente Players y luego renderizar la matriz.
function App() { const [count, setCount] = useState(4); return ( <div> {Array.from({ length: count }, () => ( <Players /> ))} </div> ); }puede usar Array constructor para hacer esto.
Código:
const [number, setNumber] = useState(4); { [...Array(number)].map((_, index) => ( <div className="" key={index}> Whatever needs to be repeatedly </div> ) ) }