React Pagination in 7 minutes [ EASY ] | Pagination Tutorial

🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9X... 🚀
Pagination in React JS with Best and Easy trick. This trick you can apply on any frontend framework like Vue, Angular, React. Copy this crypto coins API for Testing.
🤩Access the Full React Course - www.udemy.com/...
🗒️MY FAVORITE TOOLS & GEARS
Height Adjustable Desk - amzn.to/42qPZkb
Old Desk in Budget - amzn.to/3UlaFbm
Favorite Laptop - amzn.to/3OrqmKa
LG Monitor for Productivity - amzn.to/3uqA5tv
Silent Keyboard(Loved It) - amzn.to/3UjagGv
Mouse & Keyboard Combo - amzn.to/3Sq50hs
Extra Large Mouse Pad - amzn.to/48Nhcjv
Sony Headphones - amzn.to/3HHjYed
Cheap Earphones for Editing - amzn.to/48eBykN
Daily Use Laptop Stand - amzn.to/3Uj8JQL
Mini Speakers for Consuming Content - amzn.to/48YgAaK
Mport X Connector - amzn.to/3UoHsML
Mic - amzn.to/48eCrtD
3 Color Lightbar - amzn.to/42qgaaW
Dual Monitor Stand - amzn.to/48Nixa1
Stop Watch for Productivity - amzn.to/3Un1RBW
Dotted Diary - amzn.to/3vYBWq1
🚀Access REDUX Course:- www.udemy.com/...
IMPORTANT LINKS
API Link : api.coingecko....
Code Link : github.com/Cod...
Social Media Links:
🚀COURSES : www.udemy.com/...
🤩INSTAGRAM : / code_blessyou
💙FACEBOOK : / 100077716056158
🐦TWITTER : / code_blessyou
😎LINKEDIN : / code-bless-you-5b76822b
TAGS :
react pagination,pagination,pagination in react js,pagination react,react pagination tutorial,react js pagination,pagination with react js,react js pagination tutorial,pagination reactjs,pagination react js,react pagination with api,react pagination component,react table pagination,react js pagination with api,react pagination with hooks,react js pagination with hooks,react pagination with api call,how to do pagination in react js,react js

[@CodeBlessYou]

🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀

[@codenamemoe9337]

This was an amazingly clear and concise video. Thank you for this and I hope you make many more in this exact style.

[@CodeBlessYou]

Thank you. Actually I am working on Complete React JS course, If you are interested then you can register for that. For first 100 Students it will completely FREE.
Fill This Form:- forms.gle/aBtV1aRdcbztDwF3A

[@gandamraviteja7019]

Great buddy you just made this pagination very easy for me
wonderful explanation kudus

[@CodeBlessYou]

Glad to hear that. Thank you so much❤❤❤

[@Tombo272]

Fantastic tutorial! I don't typically comment on videos, but I had to give you credit. This was better than several others I combed through. Was easy to follow, understand and build on top of. Whole video was great, good job!

[@CodeBlessYou]

Glad to hear that❤❤❤

[@nahomabraham748]

The way you broke down the topic and made it super easy to follow along was incredible. I loved how you kept it short and precise

[@CodeBlessYou]

Thank you so much for your support❤❤❤

[@shaikhanas02]

No where on the RUclips I found a video like this bro. Hatts off bro you made all what I wanted in this video. Thankyou so much

[@CodeBlessYou]

Thank you so much for your support. Really grateful for that❤❤

[@shaikhanas02]

Bro Can u also add Next and Previous Button to it?

[@gyros9162]

Hi! You've made a big job which helped me a lot. It would be nice if you show us a way to create fancy pagination which looks like 1 2 3 ... 8 ... 18, 19, 20

[@CodeBlessYou]

I will try to upload

[@reshadsemedzade1182]

bro that is amazing video! short, easy and understandable

[@CodeBlessYou]

❤❤❤

[@Aliena92]

Great explanation! Thank you!

[@CodeBlessYou]

❤❤❤

[@lucianoschmidt2398]

I have to thank you for make it possible for me to rest for the weekend. The real chad.

[@CodeBlessYou]

Welcome😀

[@subaruLover475]

Best video on this topic. Subscribed!

[@CodeBlessYou]

Thank you so much for your support❤❤

[@MusicalOcean]

ADD "Math.ceil(totalPosts / postPerPage) - 1" in your pagination component if you are getting blank page on your last pag.

[@letmeglaze]

or just use Math.floor(totalPosts / postPerPage)

[@mageshkannana8795]

Now I know pagination because of you thank you brother in addition to your project I have added previous, forward, first, last button. can you teach us how to add ellipsis when we have hundreds of pages

[@CodeBlessYou]

Thank you so much for your support. I never done that ellipsis in pagination. But I think can do that by adding conditions. Sorry I don't know that properly

[@kamalpurohit7158]

what a effort bro , who don't have interest in programming , can also watch this and enjoy this video by your way of explanation, its great

[@CodeBlessYou]

Thank you so much for your feedback❤ Really grateful for that😇😇

[@yofi2614]

I think that at 0:56, row number 10 is not really necessary to be a state, cause the post per page will never be changed as a result of some event, unless you directly change it manually, so you can just give it a regular variable :)

[@CodeBlessYou]

Yeah, Thanks for Suggestion😇❤

[@francescoPace27]

You are our saver, thank you very much!

[@CodeBlessYou]

❤❤❤

[@justyourusualkid6424]

wow, superb explanation. So clean and precise. Thank you sooooo much , this helped me a lot 🥳

[@CodeBlessYou]

❤❤❤

[@goodhandlestaken]

Blown away by this, watched a few videos today on how to add some pagination functionality and they all go on for about 30 minutes.
You had it explained in 7, so easy to understand too!
Subbed

[@CodeBlessYou]

Thank you for your support ❤️😍

[@Dziejkoo]

I thought pagination is really complex but you explained that easiest possible way thank you

[@CodeBlessYou]

Glad to hear that. Thanks for watching❤❤

[@manuelpineda9067]

Man this is a great tutorial. Very helpful and to the point.

[@CodeBlessYou]

Thanks for this comment❤

[@RitchieOfficiel]

Awesome tutorial! thank you from belgium

[@CodeBlessYou]

Thanks for your support❤❤ Love from India

[@chinchinooo6657]

So helpful thank you!

[@CodeBlessYou]

❤❤❤

[@ТимурТокумов-и1к]

Amazing! Thanks for your work!

[@CodeBlessYou]

Thanks for your support❤❤❤

[@yulius4527]

The easiest and the fastest way pagination, also good core concept for beginner thankyou bro, subbed :D

[@CodeBlessYou]

Thanks for your support❤❤

[@MSRahmanSD]

Absolutely amazing. Detailed and clear. Thanks a lot! Keep up your good work!

[@CodeBlessYou]

Thanks for your support. Grateful for that❤❤

[@stevendna8956]

Thanks bro. Genius work. 🙏🙏🤩

[@CodeBlessYou]

Thanks for this comment❤❤

[@AdityaArya2207]

Thank you man very helpful

[@CodeBlessYou]

❤❤❤

[@cooperburwell321]

Thank you so much for the concise explanation!

[@CodeBlessYou]

😇❤

[@joja2174]

Teacher at college: IQJHSDFÏPJQXCPIJQF
random guy i found on youtube: * actual tutorial *

[@CodeBlessYou]

😀❤❤

[@cryptonicchronic8111]

your channel will blow up buddy, just keep up the awesome work really impressed.
only a few suggestions for future videos,
1. keep them short like how your doing, crazy graphics and long intros just wastes ourr time eh
2. keep repos as up to date as possible
3. do updated versions because a lot of previous viewers will come back to see what youve come up with next
4. if you run out of lessons to teach take requests and set up a telegram or discord to live chat with the people you teach!
thanks for this video super appreciative and always stoked to see a new channel rise up on YT I started watching hashlips when he had 3k subscribers. you got this!

[@CodeBlessYou]

Thank you so much brother for this comments and suggestions. I will apply them as soon as possible. Really grateful for this support😇❤

[@HarishC-p2m]

assume we have totally 1000 apps which is returned by the API and we can not load all the apps at once because it possess storage problem assume that right now iam some where in the 500th app page whatever the previous page apps are there are not required. i need to delete those and if i go back i should be able to get those as well.. for this sinario how could we achive

[@CodeBlessYou]

Sorry I don't understand your question. Can you explain it with example?

[@muzammilsiddiqui8771]

Bro you litrally break down those 30min long videos in 5min, that too with more clearer logic explanation than them. You deserve a subscribe 🤝

[@CodeBlessYou]

Glad I could help

[@ken2ker495]

i read the doc and it tell me the slice medthod has 2 params , the starting index and last index . It will cut the current array to a new array from the starting index to the last index - 1 . Is it right ? I need help

[@CodeBlessYou]

Yes you are correct.The slice method is like taking a piece of a cake. Imagine you have a cake (an array), and you want to cut a slice from it.
- The starting index is where you want to begin cutting.
- The ending index is where you want to stop cutting (but not include that part).
So, if you have an array like this:
const cake = ["chocolate", "vanilla", "strawberry", "caramel", "lemon"];
And you want to cut a slice from the second flavor to the fourth flavor (inclusive):
const sliceOfCake = cake.slice(1, 4);
The slice method takes a slice starting from the element at index 1 ("vanilla") and goes up to, but does not include, the element at index 4 ("caramel"). So, sliceOfCake would be:
["vanilla", "strawberry", "caramel"]
It's like saying, "Give me a piece of the array starting from here and stopping just before there."

[@ZubairKhan-eq5oq]

everything explained just in 7 min so amazingly, love u bro

[@CodeBlessYou]

Love you❤❤❤

[@farhanmuhammad5586]

thank you for the explanation sir😻

[@CodeBlessYou]

My pleasure❤❤❤

[@ahnaffaiyaz1892]

Great video, you explained this very well. Thank you!

[@CodeBlessYou]

Thank you so much for this comment❤

[@ceciliatalone2056]

Great video! Thank you for being so straightforward and clear

[@CodeBlessYou]

❤❤

[@pepsicolla123]

Thank you sir, it helped me a lot!

[@CodeBlessYou]

❤❤

[@w222k2]

damn, your code is very easy to understand, your voice too. Thank you verymuch

[@CodeBlessYou]

Glad to hear that❤❤❤

[@predeator2562]

This code is working if the posts are even...example
If there are 33 posts I have to display 10 posts on each page then it is displaying only 3 pages means ie 30 posts ...the rest 3 post is not displaying...for this what to do...?

[@suleimanhassan8579]

perfect video for pagination so glad i didnt waste time on other videos

[@CodeBlessYou]

Glad to hear that. Thank you so much

[@HelloPrithiby]

Thanku sir for this tutorial, very easy to understand

[@CodeBlessYou]

My Pleasure ❤❤

[@ZettoChannel]

Thank you so much my friend, it works

[@CodeBlessYou]

Welcome Brother😀❤

[@ohm6454]

Bro this is awesome your explanation was very clear. Thank a lot

[@CodeBlessYou]

Thanks for your support😀❤❤

[@LibriSonoro]

Super tutorial! I will do my best to implement this for my project!

[@CodeBlessYou]

Great❤❤❤

[@irenek8150]

This was really helpful, thank you so much!

[@CodeBlessYou]

Thank you so much for your support. Really grateful for that❤❤

[@UNDEREFFCT]

Can someone please explain to me how is it possible to mutate the setCurrentPage state through props ? Because as we all know, data flow in react is uni-directional! Im confused! How its possible to mutate the parent component state in the child component ?

[@yofi2614]

Amazing! please if you can keep up the good work!

[@romimaximus]

Thats was awesome crystal clear !!, ..very simple to understand ...thank you very much 😁👍

[@CodeBlessYou]

Thanks for your Feedback😀

[@zeronl_abs]

This is a greate tutorial clear and concise

[@CodeBlessYou]

❤❤❤

[@aslan6921]

I am currently working on Countries REST API task and was looking for a simple pagination cause i did't want to display all 250 items on a single page. I can't wait to get to my laptop and implement this to my code, thank you so much !

[@CodeBlessYou]

Thank you for your support. Grateful for that buddy😇❤

[@FGA-47]

Thanks man that really helpful

[@CodeBlessYou]

❤❤

[@JustMe-sx7uz]

You are the best! Thank you.

[@CodeBlessYou]

Thanks for your support❤❤❤

[@lokeshvasnik6872]

Crazy Brother Amazing...

[@CodeBlessYou]

❤❤❤

[@piyushgupta6290]

Great Great help brother you saved the day!!!!

[@CodeBlessYou]

My pleasure❤

[@pwamoreno]

This was awesome. What theme do you use?

[@CodeBlessYou]

AYU MIRAGE DARK

[@srishtikhobragade7693]

It is very great tutorial for pagination explained in simple way 💯

[@CodeBlessYou]

Thank you for your support😇❤

[@50-shivamMittal]

bro you explain very well

[@CodeBlessYou]

Glad to hear that brother❤❤❤

[@mamunahmed8113]

I am from Bangladesh, I follow your channel, and your teaching style is really awesome, I have learned more easies way from your channel videos. We need more videos on javascript and React, Thanks, brother Love from Bangladesh

[@CodeBlessYou]

Thanks for this Feedback❤

[@DuyentheNomad]

Thank you for a very easy to understand video. I successfully apply this to my project. ❤
I encountered a small issue with scrolling: when I clicked to change the page using pagination, it jumped to the top of the page, while my element was at the bottom. I fixed the problem using the useRef() and useEffect() hooks, so I wanted to share the solution for anyone who might need it:
``` import { useEffect, useRef } from 'react';
// initial setup
const Pagination = ({ ... }) => {
const scrollPosition = useRef(0); // To store the scroll position before page changes
useEffect(() => {
// Restore scroll position after state update
window.scrollTo(0, scrollPosition.current);
}, [currentPage]);
// the rest of the code
```
}

[@CodeBlessYou]

Great. Thank you so much for this solution❤❤❤

[@aya2222]

Very simple and clear explanation. Thank you!

[@CodeBlessYou]

Glad it was helpful!

[@lucaturgueniev]

This was helpful, thanks!

[@CodeBlessYou]

😇❤❤

[@sm_ali]

Thats awesome. you explanation is so awesome. After watch this video my concept about pagination is clear now. thank you so much for such an amazing video. ❤

[@CodeBlessYou]

Thank you for this nice comment ❤🙌

[@bunyameennurudeen173]

Awesome plus very helpful and educative.
Thanks Dev

[@CodeBlessYou]

Thanks for Feedback😀

[@chukwunaluegwali9583]

Excellent

[@CodeBlessYou]

❤❤

[@spraygod8164]

But bro path is not changing??

[@andrewaghoghovwia1948]

Simple clear explanation.. thanks alot.. but what of a scenario where you have more than a 100 pages ?

[@CodeBlessYou]

1. You can manually add +5 and -5 button
2. You can also add little input box for entering a page number and then display that posts.

[@andrewaghoghovwia1948]

@@CodeBlessYou Please I have another question. Is this approach better than making an api call to fetch each page? Thanks for your anticipated response

[@jiseeeh]

@@andrewaghoghovwia1948 this is obviously faster because you already have all data. so when you switch page it is already available whereas fetching data every page would make a little delay.

[@Lord_Kira_YT]

So if we have 140 pages then it might cause a lot of problem because creating 140 pagination won't look good.

[@CodeBlessYou]

For that you can create Page 1, 2, 3, ..., 138, 139, 140 like that

[@vietanhnguyen2898]

I subcribed for you. Thanks for your helpful knowledge!!!

[@CodeBlessYou]

❤❤❤

[@raveclipsbypayrave4578]

Awesome! Thanks! It helped me with what I was working on!

[@CodeBlessYou]

Thanks for Feedback😀

[@raba650]

This solution seems exactly like the one from the Traversy Media channel 😮🤔...

[@CodeBlessYou]

Traversy Media is inspiration for me. And the logic is same which goes in every production😀❤❤

[@MuneebaSaleem-o5m]

Thankyou so much for explaining why and how things are happening!

[@CodeBlessYou]

❤❤❤

[@xyz9714]

Isn't point of pagination to not grab huge chunk of data from database? Whats point of it if you still fetching all data at once?

[@CodeBlessYou]

Yes You are right. Updated Video is Coming Soon❤😻

[@Kingdomroxas100]

How come i didnt tough about slice omg, thanks for sharing this and maiking it easier to understand.

[@CodeBlessYou]

❤❤❤

[@tarikullah3743]

The pagination are working but the button are not showing what is the issue ?

[@CodeBlessYou]

Page numbers buttons are not showing? You can use inspect tool to know it is visible or not. Maybe it is the issue of styling(CSS)

[@ivangechev4243]

I've been taught to never use async on useEffect callback

[@CodeBlessYou]

Yes You should avoid using async on useEffect callback.
Check out this article: ultimatecourses.com/blog/using-async-await-inside-react-use-effect-hook

[@sandeeppillai2890]

Superb video bro... Plesse make crud video of api with axios

[@jovem_guil]

tip if you're making an API too: to improve the perfomance implement the pagination on your backend instead of getting all data and slice on frontend

[@CodeBlessYou]

Yes Helpful😀❤

[@venkateshk7971]

Awesome explanation brother 🤝👍

[@CodeBlessYou]

❤❤❤

[@Jaracara11]

Excellent tutorial; simple and concise

[@CodeBlessYou]

Thanks for support😇❤

[@omsomol.j2501]

Thanks.this tutorial is usefull

[@CodeBlessYou]

Thanks for this comment😇❤

[@muhammadowais3499]

i don't know what happend in this video but it works

[@CodeBlessYou]

🙂🙂

[@zainikram336]

best video ever on pagination

[@CodeBlessYou]

Thank you so much for your love❤❤❤

[@hamzauguz5000]

thanks broo, you save my life sdffsddsf

[@CodeBlessYou]

Thanks for this comment😇❤

[@dohdoh2361]

i can use this with data caming from firebase ?

[@CodeBlessYou]

Sure

[@shaiksaifali1429]

very very thanks . it really helped me a lot .

[@CodeBlessYou]

Welcome😀❤

[@Hosain_Ahmed]

Great tutorial. Thanks❤

[@CodeBlessYou]

❤❤❤

[@SelamsewTeshome]

Best tutorial on pagination ever.

[@CodeBlessYou]

❤❤❤

[@rafaelibarra280]

Very clear. I am already subscribed

[@CodeBlessYou]

Grateful for that❤❤❤

[@nazmuzsakib2368]

this is not the currect method for pagination.

[@MukulSharma-nr3te]

thanku so much to make this video this helps me a lot i need a little bit help from u please tell me how i can add next and previous button coding in pagination #Codeblessyou

[@CodeBlessYou]

You have to add one button "Previous" before this number loop and one button "Next" after the loop.
After that just add function for each button, If user click on previous - setCurrentPage to current page -1 and if user click on next - setCurrentPage to current page + 1.
And you can also add condition for those button disable property, for example if currentPage is 1 then disable the "Previous" button.
Just think what you want to do as user and then write code according to that😀❤

[@MukulSharma-nr3te]

@@CodeBlessYou sorrry but m kr ni paunga its ok ek dusri video dekhi hai maine usme us bhai ne sb kuch btaya hai with the help of simple css not with hard coding

[@CodeBlessYou]

@@MukulSharma-nr3te Ok 😀👍

[@nurmuhammadyorov9775]

Very useful thank you bro

[@CodeBlessYou]

❤❤❤

[@sudo576]

Thank you so much

[@CodeBlessYou]

Thanks for Comment
😀

[@ahmedahmed-my1iq]

bought your course on udemy...do we really need redux anymore when the are hooks and react query? react getting out of control...angular is easier for me.

[@CodeBlessYou]

In this field we can't stick to one particular library or language. We have to learn all things otherwise we will be replaced.

[@ahmedahmed-my1iq]

@@CodeBlessYou exactly when you have to learn everything you need to priotize. Is redux kit similiar to react context/reduce hook? Otherwise I don't want to invest my time in it when I already know angular and it does not need library like redux.

[@CodeBlessYou]

@@ahmedahmed-my1iq Honestly some companies don't use redux and some companies use redux. So just understand how redux work or create one project in redux. You will understand :)

[@ahmedahmed-my1iq]

@@CodeBlessYou so you have another video on redux kit and wanted to know how similar they are to the built in use reducer/context hook ?

[@AryanRaj-zt6cq]

You are genius. Thanks Bro

[@CodeBlessYou]

❤❤❤❤

[@rekikhamza8904]

You earned a sub, thank you

[@CodeBlessYou]

Grateful for that❤❤❤

[@analistadesistemas]

Another example using req query ?

[@CodeBlessYou]

Sure I will create tutorial on that

[@RohitKumar-ev7tn]

bro , this is the best I found .

[@CodeBlessYou]

❤❤

[@chrisjordan5849]

7 mins- Thala for a reason

[@CodeBlessYou]

❤❤❤

[@theshortexp]

Sir suppose if we have totalPost = 6 and we have to show at least 4 postPerPage
In first page it's fine in pagination button like 1,2 but second page 6/2=4
It shows button 1,2,3 page but page 3 don't exist help in that condition
And your explanation is super ❣️❣️

[@CodeBlessYou]

USE THIS : i