how to loop every 20 positions in a array

Question

So I'm learning react and js, and I'm trying to loop every 20 (the limit in a single page) and show this pictures, also show in the bottom this pages index using bootstrap. but it not really working this is my code:

const pictureItems = this.state.imgFiles.map((img, index) => {
  return (
    <PictureListItem
      id={index}
      key={`img-${img.name}`}
      imgFile={img}
      pictureDataUpdate={this.onUpdatePicture}
    />
  );
});
const pageNumber = this.state.imgFiles.length / 20;
let pages = "";
for (let i = 0; i < pageNumber; i++) {
  pages += <li><a>{i}</a></li>;
  return pages;
}

I was thinking may be I can pass the value of the index to the loop and multiply by 20 for the start and then add 20 to the end. but I can't even get the pages to show well.

Answer 1

protip: don't do yourself what the language already does on its own.

const picturesPerPage = 20;
const images = this.state.imgFiles;

...

// get the current page, rounded down. We don't want fractions
let currentPageNumber = (images.length / picturesPerPage)|0;

// find the start and end position in the "images" array for this page
let start = currentPageNumber * picturesPerPage;
let end = (1+currentPageNumber) * picturesPerPage;

// cool: make JS get those items for us, and then map those items to bits of JSX
let pages = images.slice(start, end).map(img => {
  return (
    <li key={img.src}>
      <a href={img.href}>
        <img src={img.src} alt={img.alt}/>
      </a>
    </li>
  );
});

// and we're done.
return <ul>{ pages }</ul>;

Note that if you're building an array of on-the-fly React elements, they need to have a key attribute so that the React diff engine can properly do its job - the key needs to uniquely identify the actual thing, so you can't use array position (['a','b'] and ['b','a'] are the same array, but if you pretend the array position is a key, rather than "just swap the two elements" you're lying about what happens going from one to the other, claiming actual content changes occurred when they didn't, and things get horribly inefficient).

Also note that you tried to use += for adding elements into an array - that is illegal syntax, += is string concatenation. To add individual elements to an array you use array.push (or if you need to so something weird, array.splice)