Want To Dynamically Handle Display Of Page Numbers With Respect To Pagination : Reactjs

I have some pagination logic working just fine, only issue is I can only get it to show and fixed number of pages to choose from. Right now I have put it to 5 pages, but I would li

Solution 1:

Check if this works for you. I've changed the renderPageNumbers so that it only displays from currentPage to currentPage + 5. The 5 here is random. You can choose any window. Or pass it from a prop to make it more dynamic.

 renderPageNumbers = () => {
    const numberOfPages = this.findNumberOfPages();
    let pages = [];
    const {currentPage} = this.state;
    for (
       let i = currentPage; 
       (i <= currentPage + 4) && (i < numberOfPages);
        i++
       ) {
      pages.push(
        <spankey={i}className="margin-wd-10"onClick={() => this.setOffset(i)}
          style={{ cursor: "pointer" }}
        >
          {i}&nbsp;&nbsp;</span>
      );
    }
    return pages;
  };

The link to sand box. I don't know if it's saved or not. https://codesandbox.io/s/react-typescript-b220b