React Pagination in 7 minutes [ EASY ]

React Pagination in 7 minutes [ EASY ] | Pagination Tutorial

Рет қаралды 69,740

2 жыл бұрын

🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀
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/course/the-ultimate-react-course-2023-w-real-world-projects/?referralCode=993CD544A6816303D3AD
🗒️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/course/the-ultimate-redux-course-state-management-library/?referralCode=0E6517D629498E1C48D7
IMPORTANT LINKS
API Link : api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=100&page=1&sparkline=false
Code Link : github.com/CodeBlessYou/React-Pagination
Social Media Links:
🚀COURSES : www.udemy.com/user/code-bless-you/
🤩INSTAGRAM : code_blessyou
💙FACEBOOK : people/CB-You/100077716056158/
🐦TWITTER : Code_BlessYou
😎LINKEDIN : www.linkedin.com/in/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

Пікірлер: 275

@CodeBlessYou 7 күн бұрын

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

@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 ❤️😍

@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😇❤

@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

@MSRahmanSD Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for your support. Grateful for that❤❤

@Tombo272 2 ай бұрын

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 2 ай бұрын

Glad to hear that❤❤❤

@plantleafboy 2 ай бұрын

Usually I watch multiple videos to understand concepts, your explanation is clear and makes sense. Great editing and format. Cheers NZ

@CodeBlessYou 2 ай бұрын

Glad to hear that❤❤❤

@judoScott 2 ай бұрын

Fantastic tutorial. This was so much easier than other solutions I've looked at and is exactly what I was looking for! Thank yoou so much!

@CodeBlessYou 2 ай бұрын

❤❤❤❤

@yulius4527 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for your support❤❤

@manuelpineda9067 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for this comment❤

@ZubairKhan-eq5oq Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Love you❤❤❤

@gandamraviteja7019 5 ай бұрын

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

@CodeBlessYou 5 ай бұрын

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

@suleimanhassan8579 10 ай бұрын

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

@CodeBlessYou 9 ай бұрын

Glad to hear that. Thank you so much

@reshadsemedzade1182 2 ай бұрын

bro that is amazing video! short, easy and understandable

@CodeBlessYou 2 ай бұрын

❤❤❤

@ceciliatalone2056 6 ай бұрын

Great video! Thank you for being so straightforward and clear

@CodeBlessYou 6 ай бұрын

❤❤

@romimaximus Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for your Feedback😀

@muzammilsiddiqui8771 10 ай бұрын

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 9 ай бұрын

Glad I could help

@justyourusualkid6424 8 ай бұрын

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

@CodeBlessYou 8 ай бұрын

❤❤❤

@nicolasdiaz6673 17 күн бұрын

As a newbie, I was avoiding implementing this feature as a I knew it'd give me a headache. After watching this, I can't wait to get it done today on my personal project. Thank you so much!

@CodeBlessYou 16 күн бұрын

❤❤❤

@LibriSonoro 5 ай бұрын

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

@CodeBlessYou 5 ай бұрын

Great❤❤❤

@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❤

@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 ❤🙌

@aya2222 Жыл бұрын

Very simple and clear explanation. Thank you!

@CodeBlessYou Жыл бұрын

Glad it was helpful!

@yofi2614 Жыл бұрын

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

@MusicalOcean Жыл бұрын

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

@SandyZangetsu 2 ай бұрын

or just use Math.floor(totalPosts / postPerPage)

@user-uv8ns5tq7o Ай бұрын

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

@CodeBlessYou Ай бұрын

❤❤❤

@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😇😇

@shaikhanas02 Жыл бұрын

No where on the KZfaq 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 8 ай бұрын

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

@raveclipsbypayrave4578 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for Feedback😀

@subaruLover475 Жыл бұрын

Best video on this topic. Subscribed!

@CodeBlessYou Жыл бұрын

Thank you so much for your support❤❤

@bunyameennurudeen173 Жыл бұрын

Awesome plus very helpful and educative. Thanks Dev

@CodeBlessYou Жыл бұрын

Thanks for Feedback😀

@ahnaffaiyaz1892 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thank you so much for this comment❤

@chinchinooo6657 2 ай бұрын

So helpful thank you!

@CodeBlessYou 2 ай бұрын

❤❤❤

@luker8874 9 ай бұрын

Great Video! Very concise and straight to the point

@CodeBlessYou 9 ай бұрын

❤❤❤

@irenek8150 Жыл бұрын

This was really helpful, thank you so much!

@CodeBlessYou Жыл бұрын

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

@user-ug1vi3bv1f Жыл бұрын

Amazing! Thanks for your work!

@CodeBlessYou Жыл бұрын

Thanks for your support❤❤❤

@ohm6454 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thanks for your support😀❤❤

@Kingdomroxas100 8 ай бұрын

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

@CodeBlessYou 8 ай бұрын

❤❤❤

@jigsaw6642 7 ай бұрын

watched this video, best explanation with animation, uses pure react with use effect hooks, effective usage, simple, i selected this to implement in my code. thanks

@CodeBlessYou 7 ай бұрын

Thank you so much for watching this tutorial❤❤

@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😇❤

@rekikhamza8904 4 ай бұрын

You earned a sub, thank you

@CodeBlessYou 4 ай бұрын

Grateful for that❤❤❤

@w222k2 6 ай бұрын

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

@CodeBlessYou 6 ай бұрын

Glad to hear that❤❤❤

@Jaracara11 Жыл бұрын

Excellent tutorial; simple and concise

@CodeBlessYou Жыл бұрын

Thanks for support😇❤

@rafaelibarra280 Жыл бұрын

Very clear. I am already subscribed

@CodeBlessYou Жыл бұрын

Grateful for that❤❤❤

@AdityaArya2207 Ай бұрын

Thank you man very helpful

@CodeBlessYou Ай бұрын

❤❤❤

@cooperburwell321 Жыл бұрын

Thank you so much for the concise explanation!

@CodeBlessYou Жыл бұрын

😇❤

@francescoPace27 9 ай бұрын

You are our saver, thank you very much!

@CodeBlessYou 9 ай бұрын

❤❤❤

@ZettoChannel Жыл бұрын

Thank you so much my friend, it works

@CodeBlessYou Жыл бұрын

Welcome Brother😀❤

@sandeeppillai2890 Жыл бұрын

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

@JustMe-sx7uz Жыл бұрын

You are the best! Thank you.

@CodeBlessYou Жыл бұрын

Thanks for your support❤❤❤

@lucianoschmidt2398 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Welcome😀

@user-ij9py4iz2z Жыл бұрын

Thank you, finally I could have understood pagintation

@CodeBlessYou Жыл бұрын

Thanks for your support. Really grateful for that❤❤

@user-pc1hs4ig5f 4 ай бұрын

Best tutorial on pagination ever.

@CodeBlessYou 4 ай бұрын

❤❤❤

@pepsicolla123 9 ай бұрын

Thank you sir, it helped me a lot!

@CodeBlessYou 9 ай бұрын

❤❤

@RitchieOfficiel Жыл бұрын

Awesome tutorial! thank you from belgium

@CodeBlessYou Жыл бұрын

Thanks for your support❤❤ Love from India

@farhanmuhammad5586 5 ай бұрын

thank you for the explanation sir😻

@CodeBlessYou 5 ай бұрын

My pleasure❤❤❤

@lucaturgueniev Жыл бұрын

This was helpful, thanks!

@CodeBlessYou Жыл бұрын

😇❤❤

@srishtikhobragade7693 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

Thank you for your support😇❤

@lokeshvasnik6872 Жыл бұрын

Crazy Brother Amazing...

@CodeBlessYou Жыл бұрын

❤❤❤

@shaiksaifali1429 Жыл бұрын

very very thanks . it really helped me a lot .

@CodeBlessYou Жыл бұрын

Welcome😀❤

@stevendna8956 Жыл бұрын

Thanks bro. Genius work. 🙏🙏🤩

@CodeBlessYou Жыл бұрын

Thanks for this comment❤❤

@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😇❤

@nahomabraham748 5 ай бұрын

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 5 ай бұрын

Thank you so much for your support❤❤❤

@Dziejkoo 6 ай бұрын

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

@CodeBlessYou 6 ай бұрын

Glad to hear that. Thanks for watching❤❤

@RohitKumar-ev7tn Жыл бұрын

bro , this is the best I found .

@CodeBlessYou Жыл бұрын

❤❤

@FGA-47 Жыл бұрын

Thanks man that really helpful

@CodeBlessYou Жыл бұрын

❤❤

@HelloPrithiby 5 ай бұрын

Thanku sir for this tutorial, very easy to understand

@CodeBlessYou 5 ай бұрын

My Pleasure ❤❤

@piyushgupta6290 Жыл бұрын

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

@CodeBlessYou Жыл бұрын

My pleasure❤

@nurmuhammadyorov9775 4 ай бұрын

Very useful thank you bro

@CodeBlessYou 4 ай бұрын

❤❤❤

@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

@zainikram336 Ай бұрын

best video ever on pagination

@CodeBlessYou Ай бұрын

Thank you so much for your love❤❤❤

@rizkaharizpradana8836 Жыл бұрын

simple to understand, thanks

@CodeBlessYou Жыл бұрын

Thanks for your comment🙌❤

@venkateshk7971 8 күн бұрын

Awesome explanation brother 🤝👍

@CodeBlessYou 8 күн бұрын

❤❤❤

@zeronl_abs Жыл бұрын

This is a greate tutorial clear and concise

@CodeBlessYou Жыл бұрын

❤❤❤

@Crypto_dropsss 11 ай бұрын

amazing bro !!

@CodeBlessYou 11 ай бұрын

❤❤❤

@natewalchenbach8413 Жыл бұрын

Very useful. Thank you.

@CodeBlessYou Жыл бұрын

Welcome and Thanks for this comment😇❤

@AryanRaj-zt6cq Жыл бұрын

You are genius. Thanks Bro

@CodeBlessYou Жыл бұрын

❤❤❤❤

@predeator2562 4 ай бұрын

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...?

@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

@user-uz9me3nb6n Ай бұрын

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 ?

@gabrielsantos-td8zo Жыл бұрын

tmj rei ajudou muito!!!!

@CodeBlessYou Жыл бұрын

❤❤❤

@yousseftec8060 9 ай бұрын

Bro You Are The Best ❤️

@CodeBlessYou 9 ай бұрын

❤❤

@bunny.rider69 9 ай бұрын

गांs फाड समजाया boss ❤️🔥🔥🔥

@CodeBlessYou 9 ай бұрын

😅❤❤

@_ademmeral Жыл бұрын

great logic.

@CodeBlessYou Жыл бұрын

❤❤❤

@aloktamrakar9541 11 ай бұрын

Good explanation ❤

@CodeBlessYou 11 ай бұрын

❤❤

@omsomol.j2501 Жыл бұрын

Thanks.this tutorial is usefull

@CodeBlessYou Жыл бұрын

Thanks for this comment😇❤

@minhthai9521 Жыл бұрын

Very helpful ♥

@CodeBlessYou Жыл бұрын

Thank you so much❤

@user-ck1ki7yb3c 6 ай бұрын

bro you explain very well

@CodeBlessYou 6 ай бұрын

Glad to hear that brother❤❤❤

@ravisankar9122 Ай бұрын

Thank you

@CodeBlessYou Ай бұрын

❤❤❤

@muhiddinozodxojayev8625 Жыл бұрын

Thank you !

@CodeBlessYou Жыл бұрын

❤❤

@komalsethi3295 Жыл бұрын

Good one 👌👌

@CodeBlessYou Жыл бұрын

❤

@sudo576 Жыл бұрын

Thank you so much

@CodeBlessYou Жыл бұрын

Thanks for Comment 😀

@chukwunaluegwali9583 6 ай бұрын

Excellent

@CodeBlessYou 6 ай бұрын

❤❤

@arlisaoktahani5140 3 күн бұрын

thankyouu

@CodeBlessYou 2 күн бұрын

❤❤❤

@frankezic1730 Жыл бұрын

great stuff

@CodeBlessYou Жыл бұрын

❤

@tanvirhossen9230 Жыл бұрын

great tutorial

@CodeBlessYou Жыл бұрын

❤❤

@muhammadowais3499 7 ай бұрын

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

@CodeBlessYou 7 ай бұрын

🙂🙂

@ken2ker495 8 ай бұрын

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 8 ай бұрын

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."