There are some apis that return ‘nextPageToken’ and ‘previousPageToken’ to move from one page result to another instead of apis that return results based on ‘limit’ and ‘pageNumber’ parameters .

I am integrating an api in my React App that returns ‘nextPageToken’ when I first call the api and if I call the same api with an extra parameter ‘nextPageToken’ , I get results for the next page , this response contains ‘nextPageToken’ ( for getting results of next page ) and ‘previousPageToken’ ( for getting results of previous page ) .

I want AntD pagination component with only Next and Previous buttons .

I tried the following code .

    const onPaginationButtonClick = (pageToken) => {
        pageToken!==""&& dispatch(getData({pageToken:pageToken, maxResults: 5 }));
    }
    const itemRender = (_, type, originalElement) => {
    if (type === 'prev') {
      return <a onClick={()=>onPaginationButtonClick(prevPageToken)}><LeftOutlined />Previous</a>;
    }
    if (type === 'next') {
      return <a onClick={()=>onPaginationButtonClick(nextPageToken)}>Next<RightOutlined /></a>;
    }
    // return originalElement;
    };
    <Pagination
        pageSize={5}
        itemRender={itemRender} 
        total={
        data && data?.pageInfo?.totalResults
    }
    onChange={onPaginationChange} 
    />

Using this code , I am able to get a UI like below .

But I am facing a problem here , when my page loads the first time , I see this pagination component everything looks fine . ‘Previous’ button is disabled ( because I’m on first page ) and ‘Next’ button is enabled .

Then , I click on ‘Next’ button to get results for next page . When new page results are loaded , then also I see that ‘Previous’ button is disabled .

What am I doing wrong ?

I expected Next and Previous buttons to work normally .