Estoy tratando de descubrir cómo crear una función que represente un grupo de tarjetas en next.js (usando la interfaz de usuario semántica de reacción). Es decir, tengo 50 fotos y quiero crear sin tener que ingresar manualmente las 50 tarjetas, una función que genera este grupo para mí. Para hacer esto simplemente necesitaría un índice ya que mi intención sería pasar como el src de la imagen "/src/image/"+index+"/.png"
No estoy muy familiarizado con la interfaz de usuario semántica y next.js, pero puedo hacer algo. Les dejo el código que escribí, que funciona aunque creo que hay soluciones más rápidas y bonitas... el único problema es que el primer índice que devuelve es el máximo, es decir 50 y luego el 1... ¿por qué?
renderCard() { const index = [50]; let i; for(i = 1; i<49;i++) index[i]=i const items = index.map(index => { return { image: "/src/image/"+index+".png", header: i }; }); return <Card.Group itemsPerRow={3} items={items}/> }Comentarios en línea.
renderCard() { const index = [50]; //This creates an array of one element // index[0] === 50 let i; for(i = 1; i<49;i++) { //array indexes start at 0, not 1 index[i]=i //This adds numbers 1-49 to the end of array } //after this loop, //index === [50,1,2,...,48]Pruebe una de las soluciones enumeradas aquí para inicializar su matriz.
p.ej
const index = Array.from(Array(50).keys()); //index === [0,1,2,...,49];