I'm trying to figure out how to create a function that renders a group of cards in next.js (using the react semantic ui). I mean, I have 50 photos and I want to create without having to manually enter all 50 cards, a function that generates this group for me. To do this I would simply need an index as my intention would be to pass as the src of the image "/src/image/"+index+"/.png"
I'm not very familiar with semantic ui and next.js but I can do a little something. I leave you the code I wrote, which works even if I think there are faster and more beautiful solutions ... the only problem is that the first index returned is the maximum, that is 50 and then the 1 ... why?
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}/>
}
Comments inline.
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]
Try one of the solutions listed here to initialize your array.
e.g.
const index = Array.from(Array(50).keys());
//index === [0,1,2,...,49];