Up next in 10
Build a React.js REST API to Render Posts With Pagination Controls Using jw-react-pagination in JSX
Jan 9, 2025
Get the full source code of application here:
https://gist.github.com/gauti123456/1dbec6bc709dbcb6ee4e65bcd193dc49
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:03
in this video I will show you a react
0:05
CHS pagination
0:07
component so which fetches data from a
0:10
rest API so we are fetching data from
0:12
Json placeholder API and when we load
0:15
the page we are on the first page of the
0:17
pagination we have all these controls
0:19
out there we are first page previous
0:21
page and we are on the first page and we
0:24
are showing five post this is first
0:27
second third fourth five post per page
0:30
and I can navigate to the second page
0:32
like this the next five post will show
0:35
so you can see that so we have the last
0:38
page if you want to navigate to the last
0:40
page so we are on the 20th page which is
0:42
the last page and then you can even
0:44
click the first page so it will navigate
0:47
to the first page so all these
0:49
pagination controls are there
0:51
so you can navigate to any page inside
0:54
the pag nation and on each page we are
0:57
showing five pages which are fetching it
0:59
from the placeholder API so now I will
1:03
show you the actual component which is
1:05
responsible for this so just go to
1:08
npmjs.com and just search for this
1:10
package JW react pagination so it's a
1:14
very popular
1:17
pagination library for react CH so the
1:22
command is very simple you just need to
1:24
install this by executing this command
1:26
it's a fairly new package so now to get
1:30
started we simply need to create a
1:33
simple app level component so we simply
1:36
say class app and we will be extending
1:40
our
1:42
react component so we just need to
1:45
import the
1:47
react component and at the very top we
1:51
will import the react
1:52
basic import statement so import react
1:57
from react and also we'll be importing
1:59
this pagination package JW pagination
2:03
which will be coming from JW react
2:06
pagination So it's 15 kilobytes size of
2:09
this package so we just need to export
2:12
this so export default
2:15
app so right you'll be using the render
2:17
function which is
2:19
available inside app level component
2:23
so inside this we will be returning
2:30
we'll just give it a H1 tag which will
2:32
say react pagination
2:36
example with Json placeholder
2:39
API you can use any API of your choice
2:42
I'm just using a very simple API which
2:44
is a fake rest API for developers Json
2:47
placeholder API and for this we will
2:49
bind actually we will fetch for post
2:52
whenever you load your component so
2:55
there is a method life cycle method
2:57
which is available to us which is
2:59
component did
3:00
Mount so this method is responsible when
3:03
your reacts component class level
3:06
component renders out this function will
3:09
execute and here we'll be using the
3:11
fetch
3:12
API directly and we will pass this
3:15
address https Json placeholder do typo
3:19
code.com
3:21
slost so it will be fetching the post
3:23
and it will return a promise and we will
3:25
just convert this response which is
3:28
coming to Json
3:30
and again we'll be using dot then to get
3:34
the actual data and we will console log
3:37
the data and then just declare a simple
3:40
State
3:43
variable and for declaring the state we
3:45
will have a Constructor and we calling
3:47
the super method right here and then
3:49
we'll be having some State
3:52
variables so we will declare this. State
3:56
and inside of a state we will have two
3:58
variables first is the ID items which
4:00
will be an empty array secondly page of
4:04
items so number of pages that we need to
4:08
calculate this will also be an empty
4:10
array so we have two State variables
4:12
items and page of items and now when we
4:15
fetch the data we will set this this do
4:19
set State and we will set this items to
4:22
be the data so now what happens if you
4:26
refresh your application just refresh it
4:28
and just go to to console you will
4:31
receive these 100 objects 100 posts are
4:34
returns to us and now our job is to
4:37
display 10 post five post per page so we
4:41
need to display five post per page so
4:44
what we need to
4:48
do after this the pagination component
4:52
we need to render out so very
4:56
simply just after this H1 tag you will
5:00
render out the page of items you will
5:04
map through each item we'll have some
5:09
properties and you will have a div tag
5:13
and we'll basically give it a key
5:15
parameter which will be the item id
5:18
unique
5:19
ID and inside this we will display
5:24
the title which will be contained inside
5:27
item. tile this second property will be
5:30
a simple paragraph which will be
5:32
contained inside item. body we are
5:35
displaying the array of items we are
5:37
using the map function to Loop through
5:39
all the items and just below this we
5:42
will show the pagination control so this
5:44
will be coming from this component JW
5:46
pagination and it actually takes some
5:48
parameters first of all the number of
5:51
items that you want to display this will
5:52
be coming through this do state. items
5:56
and total number of items that you want
5:58
to display which will be 100 second
6:01
option is on change so whenever you
6:03
change the page on change page this is
6:07
actually the parameter and here I will
6:09
Define this function on change page
6:12
inside my state so whenever you the user
6:17
changes the page number in the
6:18
pagination you will just Define this in
6:20
the Constructor this do on change page
6:24
this. on change page bind this you will
6:28
Define this function and
6:30
now we just need to Define this on
6:32
change page right here on change page
6:36
and page of
6:39
items so you will simply say this. set
6:42
State you will pass the page of items
6:45
that's
6:46
all so whatever is the page number
6:49
you'll be displaying that specific items
6:52
which is related to that page number and
6:54
then we just need to configure how many
6:56
P how many post we want to display per
6:59
page so it actually contains this
7:01
property page size and here we can
7:03
configure so I will display five post
7:06
per page this is the most important
7:08
value for the paging as so how many
7:11
items you want to display so now what
7:14
happens is that if you refresh your
7:15
application five pages five post will be
7:18
displayed on the first page of the
7:20
paging Nation so we are on the first
7:22
page and when I navigate to the second
7:24
page third page the next five items will
7:27
display and if I go to the last page you
7:29
will see see if I navigate to the last
7:30
page it will be
7:32
20 so 100 divided 5 comes out to be 20
7:37
so 20 pages in The pag Nation are
7:40
automatically
7:41
created so the configuration part is
7:44
very simple guys of this package so you
7:48
can easily create front end pagination
7:50
very simply using Json placeholder API
7:52
or you can use any place or any rest API
7:55
to do the pagination in react JS very
7:58
simply the configuration part is very
8:01
simple I've given all the source code in
8:02
the description of this video you can
8:04
get the full source code and thank you
8:06
very much guys for watching this video
8:08
and do check out my website as well free
8:11
mediat tools.com
8:13
uh which contains thousands of tools
8:16
regarding audio video and image and I
8:19
will be seeing you guys in the next
8:20
video