ReactJS Pagination Tutorial using React Hooks

Best Tech Resume Template: papermoontech.com/pmcsrtk/pedro
Use code: PEDRO for 20% off ^
CODE: github.com/machadop1407/react...
Hey guys, in this video I teach you guys how to use the React-Paginate library to create a simple pagination in your react application.
www.npmjs.com/package/react-p...
Fake Data: www.mockaroo.com/
-
🚀 Learn ReactJS By Building 6 Projects: codedamn.com/learn/reactjs-pr...
💻 PedroTech Discord: / discord
-
Social
▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
Website: machadopedro.com
Twitter: / pedrotech_
Linkedin: / machadop1407
Instagram: / _pedro.machado_
Github: github.com/machadop1407
Email: [e-mail]
Tags:
- Axios
- Fetch
- ReactJS Tutorial
- ReactJS and MySQL
- NodeJS Tutorial
- API Tutorial

[@sofumzo3219]

You just made my day! thanks so much for this. Very clear and easy to recreate and implement in my project as I learn React!

[@580bulldog]

Much better than most documents I googled. Great job!

[@khandoor7228]

Excellent! I love libraries that make sense as this one does. I understand sometimes its not good to use too many libraries but sometimes it does makes sense. Thanks Pedro!

[@PedroTechnologies]

Glad it was helpful! I agree, I prefer to do stuff manually, however using this library helps a lot!

[@ead5590]

Yo Pedro! This pagination video was DA BOMB! 💣 It was the final piece to the e-commerce MERN project I'm working on which is almost complete and close to deployment.
It's super easy to use pagination methods using Mongoose on the backend but I was looking to make it work on the frontend.
Great stuff. Liked the video and definitely subscribed. Thanks a lot! ✌🏻

[@sahirmmmdova5052]

I've watched many many videos about this,but you explained it the best!

[@alexandreluiz6182]

I would like to thank you very much. You have no idea how you helped me. I'm starting as a junior developer and was assigned this particular task. Wish you all the best!

[@anirbansarkar3226]

Thank You soooooooooooooooooooo much bro , you made my life easy actually I was reading a doc and It was little bit difficult to understand so I was searching for a explanation and then I found your video , not only you explain very easy way but also you made your code easy to implement. thank you again . you got new Sub bro

[@edu_sdorneles]

Excellent tutorial! I had already saw like thousands videos, but this was the unique that I learned how to do this! Thanks a lot!

[@PedroTechnologies]

Glad you liked it!

[@pegihr]

Cool... I was just thinking of adding pagination to my project. and suddenly a notification appears from your youtube channel about pagination. unfortunately right now I'm in a remote village where the internet network is very bad. I'll watch your video again when I get home

[@keenanreed5341]

Thanks! It's always a pleasure following along with your tutorials. Much appreciated!

[@boonyaweeprasertsiripond4167]

Thank you very much! This is so easy to understand, and works exactly like I wanted it to be

[@sfybskot]

You just saved my life with this video. Thank you a lot! Everything works in the best possible way!

[@PedroTechnologies]

I am happy to hear this hahaha Thank you for watching!

[@viniciusm.m.7822]

Muito bom, mano!
Forte abraço, Pedro!
God bless you!

[@cosmelvillalobos6448]

Hey man really good material, it helped me a lot on a project I was working on. keep up the good wok man!

[@vedprakashsharma5640]

Kindly create more projects of this kind to explain various concepts beautifully ..the way you have done here. Have a great day.

[@PedroTechnologies]

Thank you so much 😀

[@ikemefunanwankwo3850]

Great tutorial. Very concise. Welldone!

[@manikdebnath8120]

Now it seems how simple pagination is! Thanks a lot

[@fonsusali]

Bro I watched this video a year ago when I was new to React and it was crazy and confusing, one year later I am watching this and it's sooo easy to understand, Progress is Constant, thank you bro

[@keerthanachar]

waw

[@mrnabby4178]

Following you from a long time. You are a great teacher.

[@joseisraeldiazzapata5179]

Nice, thanks Pedro. This is gonna be useful for more crazy stuff in projects😊😊😊. A future video can be about persistent states using cookies, so that when refreshing the page, the state still exists.

[@PedroTechnologies]

Awesome! I can definitely make a video on this!

[@vedprakashsharma5640]

fantastically explained.....Great job

[@benhadjyahiamehdi4772]

Lovely Video saved me plenty of time . Keep it up PedroTech

[@saksham3002]

love you dude! this really worked!

[@_chidiebere4763]

I did not regret subscribing. Thanks Pedro

[@PedroTechnologies]

Thank you!

[@teshaych2618]

Your are such a blessing for new developers. Thanks

[@bablumia1774]

Bro trust me this is outstanding

[@federicorosales4770]

Excelente!! you explained it very well, ty! Greetings from Argentina.

[@ganny1891]

Amazing video and well explained as well! Thank you mate.

[@PedroTechnologies]

Glad it helped!

[@jamezjaz]

Very very helpful!
Thank you very much, Pedro.
Subscribed!

[@hermannmarx8993]

Thanks. That saved my day. The Hook makes it much easier to implement pagination!

[@PedroTechnologies]

Glad it helped!

[@cristinaaguero3191]

You save my lifeeeee! I really really appreciate this video. Thank you so much

[@revasseurborn2000]

I can't thank you enough mannnn ! You are the best !

[@aestheticmusic3002]

It really helped man 🤠 thanks for such tutorials ✨👍

[@muzardemoses]

I love this so much, one of the best

[@Farid-kg4ft]

Thanks a lot for such an amazing explanation. With guys like you and Zirrol React becomes understandable for everyone. These 2 are monsters when it comes to teaching React. Good luck and God bless you Pedro

[@DaWizardOfOz7]

Thanks a lot mate, this is super useful!

[@uzairmughal7461]

Wallah! It worked for me, Thanks Man!

[@sdcvwdcw]

Bro, I never comment on videos but I love you and this video

[@sudharshanpani585]

Thank you so much, I needed this very badly.

[@PedroTechnologies]

Glad it was helpful!

[@sanjayawasthi86]

Thank you PedroTech this vedio was very help for me

[@andikafebrianto4021]

Thank you for your effort, this tutorial help me solved the problem.

[@leannemaemillare4754]

helped a lot! thanks!

[@krittikakuldipsingh6033]

very nice and detailed explanation .... thanks a lot 💯

[@shivamsingh-dt1tc]

Very well explained.

[@MugiAnto1nd]

thanks bro your tutorial help me alot

[@bharathiraja9049]

Thanks for sharing this video. I really loved it and implemented in my project.. Good informative and easy to understand..

[@PedroTechnologies]

Glad it was helpful!

[@taltech9297]

thanks it was super useful!

[@TheGonza0]

Great video, it served me a lot, thank you very much !

[@PedroTechnologies]

Glad to hear that!

[@happy_cutman]

Great video, man! Thanks a lot!

[@PedroTechnologies]

Glad you liked it!

[@danielgreen5803]

Perfect, thanks man

[@mangalakarunarathne3008]

Really helpful tutorial... 💪😍

[@ayjayaywhy]

Thanks a lot for the video man! Appreciate it

[@PedroTechnologies]

Glad it helped!

[@user-qn5lu8de5b]

Thank you very much from Belarus!

[@Vlad-us9xt]

Keep up the great work!

[@PedroTechnologies]

Thank you! I appreciate the support!

[@henriquekutner6724]

Seu inglês é muito bom e só percebi que era brasileiro pelo sobrenome Machado haha Seu tutorial me salvou valeu!

[@PedroTechnologies]

kkkkkk muito obrigado!

[@esadakman]

Thanks for sharing this video. it really helped

[@BECSAQUIB]

Thanks a lot. Amazing content.

[@sougataroygcettb]

It's really helpful for the beginner, thanx

[@PedroTechnologies]

You're welcome 😊

[@TriNguyen-in1cx]

Thank you for video. It help me so much

[@funkybuddha1598]

Great Job! Thank you.

[@PedroTechnologies]

Thanks for watching!

[@agussartorio9303]

thank you rey, me ayudo mucho este video 💪💪

[@rajnishkalwar1840]

Very helpful video thanks alot

[@hrishikeshpatil9896]

Nice bro ! Very well explained ...☺️

[@PedroTechnologies]

Thank you so much!

[@jacobzak7494]

Thanks! You saved me!

[@medAmineRg]

thanks man that was helpfull

[@jahanasultan]

Thank you so much!

[@adelaionce]

Thank you so much ❤

[@kingsley577]

Thanks, bro 🙌

[@jattoritittor8342]

Thanks a lot buddy!

[@rayeemomayeer]

thanks it's help me a lot

[@you3667]

Thx. I use it to my project

[@PedroTechnologies]

Awesome!

[@ravinakumari8007]

Thank u so much :)

[@yeseniagonzalez3540]

Good video, thanks

[@marcopablodemaio992]

this video is excelent !!!

[@tdgualu7148]

Much obliged man

[@bekzatmurat1341]

Thanks Pedro

[@ShaunDVine]

Thanks for the video. Do you know how this could be modified to be integrated with filters? Once a filter is applied to the data it will also paginate the filtered results.

[@alexsandertelles130]

Bah salvou meu dia... muito top teu conteúdo irmão... continua assim.. mas faz em portugues ahahaha

[@PedroTechnologies]

kkkkkk obrigado mano fico feliz! Não da pra fazer em portugues não kkkkkk ja é muito trabalho fzer 3 por semana em ingles!

[@alexsandertelles130]

@@PedroTechnologies mas ta bom de mais... eu curti muito!!!

[@barrytophat]

Your da man!

[@keerthanachar]

Thanks a lot!

[@mucodondi]

merci Pedro menât je suis fort en react avec votre formation

[@rayvincentdelacruz8251]

Hey Pedro, if you don't mind. Would love to watch a content that teaches us how to put good commit messages for GIT. Thanks in advance!

[@PedroTechnologies]

Great suggestion! I can make a video on all the git commands I think are actually important and go in depth on how to structure a commit message

[@khalidmahmud612]

Thank u so much

[@sahilbasnet1360]

hey pedro, ive a question,
whenever i click Next Button, it is not changing pages, instead loads data on the same page...
how can i fix it

[@teshomeyalew935]

This Man is Damn Unbelievable! Thanks

[@sellgar]

Excellent tutorial! Thank you so much. I just wondering how can I float right the next button , I tried every possible css but I couldn't make it :(

[@__peanut__butter28]

this is gold

[@angele.t.2528]

Thank you bro!

[@PedroTechnologies]

Happy to help

[@vivekanandareddymaddela]

Thanks a lot

[@wajidkashoo9242]

very helpful

[@mansilaad2062]

Hey how we can do pagination with react and node..

[@jhonjairogarcesmontes1035]

Hey Pedro what if I want to add an animation when it changes to another page?? do I do it with CSS??

[@bhuvaneshwariv8287]

Hii @Pedro Tech im using mui for pagination so instead of select method what can I use to change the page with data.

[@angelalmachado]

so cool!

[@PedroTechnologies]

Thank you! I appreciate the support! Gengiva

[@thomashaugen1566]

Hi, how to implement back browser button functionality in pagination, as when you click on browser back button it goes back to the previous page but not the actual pageNumber of the pagination. Thanks

[@mkheree]

Thank you. Can you please say what is the theme you are using in VS Code?

[@tobiolaleye3353]

This was really helpful, but i wish the pages will refresh and start from the top when the next button is clicked

[@GiancarloCarccamo]

great video

[@aksaurooj838]

Thankyou so much

[@PedroTechnologies]

Most welcome 😊

[@runatrix]

Than you for the content. In my opinion pagesVisited should be called currentUser or currentElement, as it refers to the current user and not really how many pages were visited.