react-paginate | A ReactJS pagination component | Frontend Framework library

I have an array of 12 objects of a list of movies and i want to create pagination for them using React paginate by displaying 4 items for each page, I already display the items on the UI but the numbers of pages didn't work even when I click on the Next button.

it is my first experience with pagination in react.

I'm creating fullstack application. And, i have on backend paginated data, like this: { "pageNumber": 1, "pageSize": 12, "totalRecords": 172, "data": [...] }

Now i need to fetch them on front with pagination also. But, i'm not good with react and dont know how to render. So, i'm wondering how to display all items from each page?

I attached an Event Listener when TabularListPgination component mounts.

Then, I tried to access the current Redux state in Event Listener. However, I'm getting initial state of dataTable reducer instead of current state.

This same was working fine in Class based Component. Could you share your insight on this?

Sorry for my short in English.

I have a ecommerce store which list out all products and filter option. Today I have added login and regsiter options. So to get saved token even after page refresh, I have implemented redux-persist. Now the problem is, if I refresh the page the design is breaking and state is not getting. In product listing page I have placed a loader before fetching and loader will be hide after products loaded. Now every time loader is showing with some other animation. Please have a look into my code,

store.js

I got this error when updating state from fetch.

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

This is my code below

How to connect polyfill correctly? I read all the documentation Babel 7 and followed it. Below you can see my settings. if I add this in the webpack config

I am using react-paginate library that accepts class names in props to style internal components:

I run project "react-app-rewired start" development mode. The project compiles without errors.

Next I edit any file in /src/* the project is recompiled, but does not respond to /src/view/* NO compilation!

Although if I kill and restart the demon "react-app-rewired start" the project will compile completely. Why is this happening?

package.json

I am using an array of objects that comes from the server in componentDidMount method and then I save it into the state.

If I change page size from select component everything is ok, but the page number clicks don't work.

For example, I set the page size to 20. My data array length equal to 29, so I have 2 pages. In the react table, there are 20 rows, and selected page - number 1. When I select page 2, nothing happens. It should have shown the remaining 9 rows but nothing occurs.

I know that in general the amount of data corresponding to the page size must come from the server when click to another page occurs. But I was given the task that I should implement everything without requests to the server.

How I can implement this? Any of your help will be useful, great thanks in advance! Here is my code: