I am trying to implement one functionality in react. I have an array lets say
const arr =[
'a1','a2','a4','a5','a6',
'a7','b1','b2','b3','b4',
'c1','c2','d1','e1','e2',
'e3','e4']
On page load by default, the first 5 element of the array needs to be rendered. There are two buttons increment and decrement. On increment hit, I need to show the next 5 elements of the array and on decrement go back to the previous 5 elements. if the number of elements is not divisible completely by 5 e.g if there are 16 elements then at the end I need to elements 1-5,5-10,10-15,11-16
Kindly suggest what can be done here?
Just write yourself a utility function for pagination
// select page of size pageSize from array a at index pageIndex
function paginate(a, pageIndex, pageSize) {
var endIndex = Math.min((pageIndex + 1) * pageSize, a.length);
return a.slice(Math.max(endIndex - pageSize, 0), endIndex);
}
var arr = [
'a1', 'a2', 'a4', 'a5', 'a6',
'a7', 'b1', 'b2', 'b3', 'b4',
'c1', 'c2', 'd1', 'e1', 'e2',
'e3', 'e4'
]
console.log(paginate(arr, 0, 5))
// ['a1', 'a2', 'a4', 'a5', 'a6']
console.log(paginate(arr, 2, 5))
// ['c1', 'c2', 'd1', 'e1', 'e2']
console.log(paginate(arr, 3, 5))
// ['d1', 'e1', 'e2', 'e3', 'e4']