Render Group of Cards in Next.js

Question

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}/>
}

Because you have stored `[50]` in `index`. – brc-dd Oct 27 '21 at 16:29 — brc-dd, Oct 27 '21 at 16:29

score 0 · Answer 1 · answered Oct 27 '21 at 16:49

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];

Render Group of Cards in Next.js

1 Answers1