'duplicated mapping key' error occurred, during pagenation

[vlkzmn]

If you use this code: dashboard/starter-example/app/ui/invoices/pagination.tsx when the number of pages is more than 7, the error 'duplicated mapping key' will appear. Because, under certain conditions, the generatePagination function returns an array in which there may be identical elements "...", which are then used as a key.

Also, it would be worth adding two more conditions to the generatePagination function, when the current page = 3 and the current page = total pages - 2:

export const generatePagination = (currentPage: number, totalPages: number) => {
  if (totalPages <= 7) {
    return Array.from({ length: totalPages }, (_, i) => i + 1);
  }

  if (currentPage < 3) {
    return [1, 2, 3, "...", totalPages - 2, totalPages - 1, totalPages];
  }

  if (currentPage === 3) {
    return [
      1,
      currentPage - 1,
      currentPage,
      currentPage + 1,
      "...",
      totalPages - 1,
      totalPages,
    ];
  }

  if (currentPage > totalPages - 2) {
    return [1, 2, 3, "...", totalPages - 2, totalPages - 1, totalPages];
  }

  if (currentPage === totalPages - 2) {
    return [
      1,
      2,
      "...",
      currentPage - 1,
      currentPage,
      currentPage + 1,
      totalPages,
    ];
  }

  return [
    1,
    "...",
    currentPage - 1,
    currentPage,
    currentPage + 1,
    "...",
    totalPages,
  ];
};

This option removes the problem of the lack of a button to page 4 when page 3 is active and the same effect at the end, and also makes the pagination always the same length of 7 cells.

[CutlerRU]

Rather than doing this I implemented the following in the Pagination.tsx file

return (
  <PaginationNumber
    key={index}
    href={createPageURL(page)}
    page={page}
    position={position}
    isActive={currentPage === page}
  />
);

this will fix that duplicate key issue, since each index should be unique.

The second issue you mentioned I noticed as well and resolved that by keeping it a standard 7 navigation tiles across the board.

export const generatePagination = (currentPage: number, totalPages: number) => {
  // If the total number of pages is 7 or less,
  // display all pages without any ellipsis.
  if (totalPages <= 7) {
    return Array.from({ length: totalPages }, (_, i) => i + 1);
  }

  // If the current page is among the first 3 pages,
  // show the first 4, an ellipsis, and the last 2 pages.
  if (currentPage <= 3) {
    return [1, 2, 3, 4, '...', totalPages - 1, totalPages];
  }

  // If the current page is among the last 3 pages,
  // show the first 2, an ellipsis, and the last 4 pages.
  if (currentPage >= totalPages - 2) {
    return [1, 2, '...', totalPages -3, totalPages - 2, totalPages - 1, totalPages];
  }

  // If the current page is somewhere in the middle,
  // show the first page, an ellipsis, the current page and its neighbors,
  // another ellipsis, and the last page.
  return [
    1,
    '...',
    currentPage - 1,
    currentPage,
    currentPage + 1,
    '...',
    totalPages,
  ];
};