See my pull request here #4. 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 or first position. To split the countries into pages we need to do this to our array of countries export function paginate(items, pageNumber, pageSize) { const startIndex = (pageNumber - 1) * pageSize; return _(items).slice(startIndex).take(pageSize).value(); } This will take the correct slice of countries 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 and pass it to the <Countries/> component
See my pull request here #4. 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 or first position. To split the countries into pages we need to do this to our array of countries
export function paginate(items, pageNumber, pageSize) { const startIndex = (pageNumber - 1) * pageSize; return _(items).slice(startIndex).take(pageSize).value(); }This will take the correct slice of countries 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 and pass it to the<Countries/>component