React.js, Next.js, Typescript, TailwindCSS

Community feedback

• 

  Sean Red•635

  @seanred360Posted over 2 years ago

  I have added a pagination component to your site. See my pull request here https://github.com/Felistus/knowCountries/pulls.

  The logic we want to implement for the page selector component is: There are 8 page links shown at any time (e.g. 1 2 3 4 5 6 7 8 ) unless there are less than 8 total pages. The active link (current page) is in the 3rd position, except for when the active link is less than 3 from the last position.

  To split the countries into pages we need to do this to our array of countries function paginate(items, pageNumber, pageSize) { const startIndex = (pageNumber - 1) * pageSize; return _(items).slice(startIndex).take(pageSize).value(); } Note I am using the Lodash library to shorten the code. This will take the correct slice of countries at the correct position from our array and give us the current page of countries. Then instead of passing the entire countries array into the <Countries/> component, we pass just one page. When we change pages we get a new slice of 8 countries and pass it to the <Countries/> component and the React will re render.

  Marked as helpful

  0

  ---

  

  Obieze Ezeugo Felistus•130

  @FelistusPosted over 2 years ago

  @seanred360 thank you so much for this... I will test and merge. I'm so grateful for your response. Trying to understand the pagination concept has been my issue because I tried recreating mine to work but due to lack of understanding, I had to pause and seek for assistance. I will give you feedback when I implement this. Thanks a bunch Sean 🥰🤗

  0