Active Page is not displayed with component refresh upon page change about react-js-pagination

[wwwaiser]

Hi. I am not sure that I understood your question properly.

I've noticed that current pagination library is meant to be used in a scenario when all data fetched once from the server.

this is not true. react-js-pagination is just simple component which can render pagination according to incoming props and know nothing about your data. It invokes onChange every time when your user try to change page. It assumes that at onChange function you can fetch data from any random place (server, redux store, localStorage) or trigger some actions. Any other interactions you should handle by yourself.

As I said above, probably I did not understood your question. if you have some examples of source, please provide

[viacheslavkremeshnyi]

parseInt worked for me:
<Pagination activePage={parseInt(this.props.activePage)}

[maretOlia]

Ok, I'll try again.
I have Pagination component that exists inside parent container component(I am not providing code of the parent, to verbose ):

const PaginationTab = ({itemsCount, handlePageChange, currentPage}) => (
  <div className="pagination-tab">
      <Pagination        
          activePage={currentPage}
          itemsCountPerPage={10}
          totalItemsCount={itemsCount}
          pageRangeDisplayed={3}            
          onChange={handlePageChange} 
  />       
  </div>);

"itemsCount", "handlePageChange", "currentPage" are props passed from parent component that will fetch data from the server and refresh upon page click (refreshing Pagination component as well)

I can see that "currentPage" prop is being passed to component correctly in every case, and all works properly, except that fact that page number that corresponds to "active page" is not highlighted in a browser.
Highlighting works only if Pagination component is not being refreshed after page click(and it happens only if I already visited the page and have corresponding data in a local store - so parent component isn't updated and doesn't trigger children refresh).

[wagoid]

hey @maretOlia, could you replicate this scenario in something like webpackbin so that we can check?
I've worked with this library before with completely on-demand pages, and didn't have this issue 🤔
You can use the React boilerplate in webpackbin, and quickly draft the POC :)

[maretOlia]

Thanks to all of you. I've found a way to do what I needed with a vanilla react-bootstrap component. So I am closing this issue

[AWR14]

i'm also having this issue, whats the solution

[Mercy-1998]

Thanks to all of you. I've found a way to do what I needed with a vanilla react-bootstrap component. So I am closing this issue

Can you tell us how you solved this issue, as i'm experiencing the same issue