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
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
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!
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!
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
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!
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 :)
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...?
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 !
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
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."
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. ❤
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
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
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
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
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
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 ``` }
best explanation in entire youtube . sir make a video like this on add to cart functionality with redux toolkit and with context api. thanks sir I'm waiting for it.
@ bro thank you that you replied I saw 3 of your videos today including this one and damn you explained so easily like a piece of cake. I have a request. Can you make these following videos like this one please? 1. Advanced pagination using actual backend from scratch 2. Advanced search in React with multiple filters 3. How to develop logic building in react?(I asked this because I am struggling with problem solving and whenever I try to do something then I know I have to do this but I forget how to do that) 4. Oauth full course Please make this video bro. It’s a fellow TH-camr request to you🙏😭
@@manishbhurtel8848 I will make these videos. But currently I am working on Node JS Course in which I cover node core, express, mongoDB and some projects. So it's hard to create these videos on the spot. Because I am in the flow of course. But I will try to create them as soon as possible. I hope you understand brother❤❤❤
🎓Get FREE access to my upcoming Ultimate Node.js Course for the FIRST 100 students: forms.gle/8m9XA7kmc17nHfhz8 🚀
This was an amazingly clear and concise video. Thank you for this and I hope you make many more in this exact style.
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
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
Thank you for your support ❤️😍
Great buddy you just made this pagination very easy for me
wonderful explanation kudus
Glad to hear that. Thank you so much❤❤❤
Great video! Thank you for being so straightforward and clear
❤❤
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!
Thank you so much brother for this comments and suggestions. I will apply them as soon as possible. Really grateful for this support😇❤
damn, your code is very easy to understand, your voice too. Thank you verymuch
Glad to hear that❤❤❤
everything explained just in 7 min so amazingly, love u bro
Love you❤❤❤
Absolutely amazing. Detailed and clear. Thanks a lot! Keep up your good work!
Thanks for your support. Grateful for that❤❤
perfect video for pagination so glad i didnt waste time on other videos
Glad to hear that. Thank you so much
Man this is a great tutorial. Very helpful and to the point.
Thanks for this comment❤
The easiest and the fastest way pagination, also good core concept for beginner thankyou bro, subbed :D
Thanks for your support❤❤
Awesome tutorial! thank you from belgium
Thanks for your support❤❤ Love from India
wow, superb explanation. So clean and precise. Thank you sooooo much , this helped me a lot 🥳
❤❤❤
Usually I watch multiple videos to understand concepts, your explanation is clear and makes sense. Great editing and format. Cheers NZ
Glad to hear that❤❤❤
Thanku sir for this tutorial, very easy to understand
My Pleasure ❤❤
You are our saver, thank you very much!
❤❤❤
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!
Glad to hear that❤❤❤
Bro you litrally break down those 30min long videos in 5min, that too with more clearer logic explanation than them. You deserve a subscribe 🤝
Glad I could help
You are the best! Thank you.
Thanks for your support❤❤❤
Best video on this topic. Subscribed!
Thank you so much for your support❤❤
Great explanation! Thank you!
❤❤❤
Easy to understand. Thank you
❤❤❤
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!
❤❤❤❤
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
Thanks for this Feedback❤
Super tutorial! I will do my best to implement this for my project!
Great❤❤❤
This is a greate tutorial clear and concise
❤❤❤
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!
❤❤❤
bro you explain very well
Glad to hear that brother❤❤❤
This is a great video with stellar explanation from a great voice.
Thank you so much for your support. Really really grateful for that❤❤❤
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 :)
Yeah, Thanks for Suggestion😇❤
Thanks! It's very useful!
❤❤❤
bro that is amazing video! short, easy and understandable
❤❤❤
No where on the TH-cam I found a video like this bro. Hatts off bro you made all what I wanted in this video. Thankyou so much
Thank you so much for your support. Really grateful for that❤❤
Bro Can u also add Next and Previous Button to it?
Great tutorial. Thanks❤
❤❤❤
Bro this is awesome your explanation was very clear. Thank a lot
Thanks for your support😀❤❤
This was really helpful, thank you so much!
Thank you so much for your support. Really grateful for that❤❤
Amazing! Thanks for your work!
Thanks for your support❤❤❤
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
Thank you so much for your support❤❤❤
Very simple and clear explanation. Thank you!
Glad it was helpful!
I subcribed for you. Thanks for your helpful knowledge!!!
❤❤❤
ADD "Math.ceil(totalPosts / postPerPage) - 1" in your pagination component if you are getting blank page on your last pag.
or just use Math.floor(totalPosts / postPerPage)
I have to thank you for make it possible for me to rest for the weekend. The real chad.
Welcome😀
Thank you so much my friend, it works
Welcome Brother😀❤
Thankyou so much for explaining why and how things are happening!
❤❤❤
Teacher at college: IQJHSDFÏPJQXCPIJQF
random guy i found on youtube: * actual tutorial *
😀❤❤
Thats was awesome crystal clear !!, ..very simple to understand ...thank you very much 😁👍
Thanks for your Feedback😀
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...?
Thanks bro. Genius work. 🙏🙏🤩
Thanks for this comment❤❤
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 !
Thank you for your support. Grateful for that buddy😇❤
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
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."
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. ❤
Thank you for this nice comment ❤🙌
Thanks man that really helpful
❤❤
So helpful thank you!
❤❤❤
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
I will try to upload
Thank you man very helpful
❤❤❤
Awesome! Thanks! It helped me with what I was working on!
Thanks for Feedback😀
Great Video! Very concise and straight to the point
❤❤❤
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
Thank you so much for your feedback❤ Really grateful for that😇😇
It is very great tutorial for pagination explained in simple way 💯
Thank you for your support😇❤
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
Sorry I don't understand your question. Can you explain it with example?
Best tutorial on pagination ever.
❤❤❤
This was helpful, thanks!
😇❤❤
Awesome plus very helpful and educative.
Thanks Dev
Thanks for Feedback😀
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
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
You earned a sub, thank you
Grateful for that❤❤❤
Excellent tutorial; simple and concise
Thanks for support😇❤
Thank you so much for the concise explanation!
😇❤
Awesome explanation brother 🤝👍
❤❤❤
I thought pagination is really complex but you explained that easiest possible way thank you
Glad to hear that. Thanks for watching❤❤
thank you for the explanation sir😻
My pleasure❤❤❤
Great video, you explained this very well. Thank you!
Thank you so much for this comment❤
best video ever on pagination
Thank you so much for your love❤❤❤
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
Thank you so much for watching this tutorial❤❤
Very clear. I am already subscribed
Grateful for that❤❤❤
Very useful thank you bro
❤❤❤
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
```
}
Great. Thank you so much for this solution❤❤❤
Thank you sir, it helped me a lot!
❤❤
How come i didnt tough about slice omg, thanks for sharing this and maiking it easier to understand.
❤❤❤
Thank you, finally I could have understood pagintation
Thanks for your support. Really grateful for that❤❤
Amazing! please if you can keep up the good work!
Bro You Are The Best ❤️
❤❤
Great Great help brother you saved the day!!!!
My pleasure❤
Crazy Brother Amazing...
❤❤❤
very very thanks . it really helped me a lot .
Welcome😀❤
thankyouu
❤❤❤
Good explanation ❤
❤❤
best explanation in entire youtube .
sir make a video like this on add to cart functionality with redux toolkit and with context api.
thanks sir I'm waiting for it.
It will take time. Because Currently I am working on the Node JS Course❤❤❤
You are genius. Thanks Bro
❤❤❤❤
Thank you so much for this video ❤
❤❤❤
simple to understand, thanks
Thanks for your comment🙌❤
Thank you
❤❤❤
bro , this is the best I found .
❤❤
tmj rei ajudou muito!!!!
❤❤❤
Very useful. Thank you.
Welcome and Thanks for this comment😇❤
Good one 👌👌
❤
This was awesome. What theme do you use?
AYU MIRAGE DARK
which vs code theme are you using?
AYU MIRAGE
@ bro thank you that you replied
I saw 3 of your videos today including this one and damn you explained so easily like a piece of cake. I have a request. Can you make these following videos like this one please?
1. Advanced pagination using actual backend from scratch
2. Advanced search in React with multiple filters
3. How to develop logic building in react?(I asked this because I am struggling with problem solving and whenever I try to do something then I know I have to do this but I forget how to do that)
4. Oauth full course
Please make this video bro. It’s a fellow TH-camr request to you🙏😭
@@manishbhurtel8848 I will make these videos. But currently I am working on Node JS Course in which I cover node core, express, mongoDB and some projects. So it's hard to create these videos on the spot. Because I am in the flow of course. But I will try to create them as soon as possible. I hope you understand brother❤❤❤
@ sure bro no worries
If it’s node js then please include everything from creating a robust paginated backend to a fullly authenticated blog app
@@manishbhurtel8848 I am thinking to add E-commerce project
Very helpful ♥
Thank you so much❤
Thank you so much
Thanks for Comment
😀