0

I'm a beginner in web development, I have created todoList app, it's working perfectly I can insert many lists into my webpage as much as I want.

using (React js, Bootstrap )

but I want to limit it, like 10 lists in one page, if it's more than 10 I want it to go to the second page.

(like Gmail front page where we can see 50 emails in one page and rest divided among other pages )

please is there anyone who can help me out. for this solution

I really appreciate it. Thank You

Nithish
  • 5,393
  • 2
  • 9
  • 24
Ananthapadmanabhan Jayarajan
  • 1
  • 1

2 Answers2

0

Based on How to get first N number of elements from an array i copied the rendering of a sliced list and then i just added the paging to the slice method

Var page=0;
var size = 10;
var items = list.slice(size*page, size*(page+1)).map(i => {
    return <myview item={i} key={i.id} />
}

return (
  <div>
    {items}
  </div>   
)

Now you will need buttons to increment or decrement the page number. Note that this code doesnt keep in mind what happens when your array is smaller then the requested array slice. And you need to replace myview with whatever you have.

Ps: Showing a small bit of code helps to get better answers

RWael
  • 19
  • 3
0

I hope that helps but I would recommend you to use lodash library, and do something like that:

var b = 1;
var end = 10;

// this will generate an array [ 3, 4, 5, 6, 7, 8, 9 ]
var array = _.range(b, end); 

// now I iterate over it
_.each(array, function (value, key) {
  console.log(value, key);
});
Hamza Sabir
  • 63
  • 7