This is like the easiest and most simple way of paginating with React I've seen, much better than many other tutorials, hats off Brad you're always the man
@@yusuffakhreddin263 it is easier to fetch small amount of results when needed, rather than getting ALL the results and paginating them on the front end. For example my table have millions of rows and those rows have even more results attached in foreign tables. So loading them All is very expensive in a loading time and size and it is also unnecessary if user wants to get for example second page results and he will never reach third page. For such large data we paginate on the back end and retrieve pieces of data.
PSA: If using this pagination component inside of a route ,the anchor tag will navigate you away from your route and throw an error. The "!# href is a hack to trigger javascript while avoiding side effects. It can work in some cases but is not semantically correct . The fix for this, and semantically correct option would be to simply remove the href attribute and use a button tag instead of an anchor tag.
This was possibly the best coding tutorial I've ever watched. I've been browsing google for hours just trying to find a decent tutorial and this was easily the best, super straight and to the point and great at explaining everything thats going on. Thank You!
I can't thank you enough Brad, THAAAAAANNNNNNKKKKKKKKKKKSSSSSSSSSSS. a lot for this, I needed to implement it in one of my project on my new job and I'm not good at frontend but because of you, I was able to implement it ❤️❤️❤️❤️
Great video TM. You explain things so clearly with additional 'why we do this...' thrown in which gives context rather than just running through lines of code. Thanks !
Thank you, Brad! This tutorial was extremely useful! I was struggling with Material UI as beginner in React but you made building pagination to look so easy and clean! You thought me so much and I am very grateful to everything you do for us! Much love!
Thanks man. I'm at point in a project where I had to chose which pagination to use. The data coming from the backend is already paginated, but I don't like that a new request had to be sent to the backend each time a new page is requested; I consider this too much load. Then I didn't want to use a package to paginate my data. What I'm left with is to learn how to do the pagination; you just helped out. Thanks a lot . You're saving tons of life and jobs.
for anyone wondering why indexOfLastPost = currentPage * postsPerPage is valid: the slice method's end parameter can be greater than the array length. if this is the case (for example last page has fewer posts), slice uses the array's length as the end parameter.
Incredible tutorial :D , well explained step by step and not skipping anything, the truth has helped me a lot, thanks for the time! Greetings from Argentina.
Phenomenal video, that was crystal clear. Thanks for posting the code too, I'm gonna practice with the Json file. I have a react technical interview coming up so thanks so much for this.
Thanks Brad, this is a big help. One sidenote: the href attribute in the pagination component crashed my app, I'm not familiar with the exclamation mark in href="!#", when I replaced it with href="#", and everything worked fine. I read elsewhere that using anchor tags with onClick events cause unexpected behavior, so I replaced those with buttons (developer.mozilla.org/nl/docs/Web/HTML/Element/a).
Many Thanks, Brad!! It really helped me. Also I'd like to show how I solve my url issue. I changed paginate(number)} href="!#" className="page-link">{number} by : Add Link react-router-dom paginate(number)}> {number}
Great video! But regarding the number of pages that should be generated, I don't push the pages into a new array. I just use Math.ceil() to return the number of pages. For example, one could do this: const pageNumbers = Math.ceil(totalPosts/postsPerPage) === 0 ? 1 : Math.ceil(totalPosts/postsPerPage);
Thank you so much for the great walk-through. I was able to adapt this simple code into a table that stored all my accounts. The switch from front end to backend was also super easy. Just needed to pull from a server with my data and use a limit and offset for the data. The rest of the page work is done front end.
Amazing, been searching for something like this everywhere! It would be amazing would be if you could do it where you don't load then unless you click second or third page etc, only load recourses required - Just like you mentioned in your video. Thanks again!
This method will result in slight lag when you have a lot of pages. To fix the lag, simply remove the anchor tag of the page numbers and put the onClick on the li tag .
In the video, you wrote the useState code and right after that, you showed us how actually state and useState are similar. That took at best two seconds. But this type of little things makes you different than thousands of content creator. Please consider making a short course on Algolia with react in the future? Take love...💛💛💛
This is like the easiest and most simple way of paginating with React I've seen, much better than many other tutorials, hats off Brad you're always the man
Wierd logic
I watched this in 2024, still a valid tutorial, thanks God for Brand Traversy Media
Even in 2022, This Tutorial is still REALLY HELPFUL!
Brad, your videos are such a HUGE help. THANK YOU!!
Traversy Media is the new Khan Academy for all things web .. excellent job Brad!
Bullshit. This code doesn't work for me.
@@romanpabianczyk8870 yeah, it only does for small amount of results. Not for thousands as Brad said in the end.
@@avthreek do you know why ?
@@yusuffakhreddin263 it is easier to fetch small amount of results when needed, rather than getting ALL the results and paginating them on the front end.
For example my table have millions of rows and those rows have even more results attached in foreign tables. So loading them All is very expensive in a loading time and size and it is also unnecessary if user wants to get for example second page results and he will never reach third page. For such large data we paginate on the back end and retrieve pieces of data.
@@avthreek thank you
PSA: If using this pagination component inside of a route ,the anchor tag will navigate you away from your route and throw an error. The "!# href is a hack to trigger javascript while avoiding side effects. It can work in some cases but is not semantically correct . The fix for this, and semantically correct option would be to simply remove the href attribute and use a button tag instead of an anchor tag.
you saved my fucking life i was having a fucking meltdown
Thanks
Nice tip bro, helped me out with that one appreciate it!
You can also try href="#!" but as you've said, it's still not semantically correct.
U U a a real one thanks
brad, i really don't have much time but when you post a video, like it's a must watch
Finally I saw i pagination tutorials that doesn't use a paginated library. Perfect to learn how that really works with actual code.
Dude, I'm putting an altar of you next to my desk, it's official. U are such a great teacher, thanks for all the great content.
This was possibly the best coding tutorial I've ever watched. I've been browsing google for hours just trying to find a decent tutorial and this was easily the best, super straight and to the point and great at explaining everything thats going on. Thank You!
I can't thank you enough Brad, THAAAAAANNNNNNKKKKKKKKKKKSSSSSSSSSSS. a lot for this, I needed to implement it in one of my project on my new job and I'm not good at frontend but because of you, I was able to implement it ❤️❤️❤️❤️
This was the simplest tutorial I've seen all day on pagination. Thank you. I understood 100% all while the simple way to use hooks. You're awesome.
so do I :)
Thank you man!
I agree 100%
I began taking his class in udemy about a month ago and I will take his courses ever since. great teacher of mine
You actually listened to the request from your users. You really care about your viewers! 😃
Great video TM. You explain things so clearly with additional 'why we do this...' thrown in which gives context rather than just running through lines of code. Thanks !
Thank you, Brad! This tutorial was extremely useful! I was struggling with Material UI as beginner in React but you made building pagination to look so easy and clean! You thought me so much and I am very grateful to everything you do for us! Much love!
Who dislikes this amazing video? This is very very helpful. I just love it.
They should comment that why did not they dislike the video for. ^^
Thank you so much Brad. I was the guy who asked for this video..Thank you again for your work..you are my god and my inspiration
Waking up with a new Brad video is the best. Thanks!
Okay this one really helped, thank you. Even after 4 years, your content is helpful
Very good tutorial ! for the , i've found that href="!#" doesn't work, it does with href="#!". Maybe it's because i don't have bootstrap
Im thank ful that i see your comment mine not working to when i use "!#"
i've searching about it for a few hours, I watched some video and read some blogs but your content was the only one that really helped me . Thanks !
watched this video, uses pure react to develop pagination, one of the best concept using only use state hooks, very usefil
EVEN IN 2023 this was helpful with a bit tweaks from newer hooks that reacts has now this is great thanks!
dont mind my grammar offl the ZA
I love these short and simple lessons. I learned so much from this. Thank you!
Dude you're a G. This is by far the cleanest way i've seen so far
but there is a small question - how to make the first link active when the page is loaded, since the page reloads on the first click
With your tutos, I progressed, raised my level. A big thank-you
Brad Traversy
oh thank God finally I find the best video about pagination
Thanks man. I'm at point in a project where I had to chose which pagination to use. The data coming from the backend is already paginated, but I don't like that a new request had to be sent to the backend each time a new page is requested; I consider this too much load. Then I didn't want to use a package to paginate my data. What I'm left with is to learn how to do the pagination; you just helped out. Thanks a lot . You're saving tons of life and jobs.
Thanks, Brad. This was my first intro to pagination. I tried another instructor but he uses 'lodash' for something you made so simple.
for anyone wondering why indexOfLastPost = currentPage * postsPerPage is valid:
the slice method's end parameter can be greater than the array length. if this is the case (for example last page has fewer posts), slice uses the array's length as the end parameter.
2023 and this tutorial is so useful! Thanks a lot
No idea what those 12 haters have to complain about - amazing video, simple, efficient and great way of explaining.
Anyone else hits the Like button as they start watching, bcuz its Brad, and u just know it's going to be awesome?
Incredible tutorial :D , well explained step by step and not skipping anything, the truth has helped me a lot, thanks for the time! Greetings from Argentina.
Thank you. Right in time. Would be more complete showing how to make pagination button active.
Congrats Brad for 777k subscribers 😄
now he has 1.29M
@@Endrit719 now he has 1.45M
Brad, please upload a tutorial Video on Data Structures and Algorithms in JS
there is one in freecodecamp channel
this is the simplest video on pagination that is present !!!!!
Thanks a lot man, this really helped me understand how pagination works and now I have a full component I can always reuse
Still relevant in 2023. React-bootstrap table needs an update with pagination. Thanks for vid.
This helped me get a job! Thank you so much Brad!
Dude!!! Thank you so much! My nightmares doing paginations are over!!!
Echoing what everyone else is saying, this is a great tutorial. Very helpful! Thank you!
Phenomenal video, that was crystal clear. Thanks for posting the code too, I'm gonna practice with the Json file. I have a react technical interview coming up so thanks so much for this.
Brad is the best teacher and inspirational guy. Make this blue if you think it's true.
Btw: thank you very much sir.
This is great. I'm just getting to grips with React and hooks so this was perfect - I may even use pagination in my next project now. Thanks Brad
wow! Thank you for your video, it was so helpful for me, not only as pagination tutorial, but also as a short lesson about how cool hooks are.
Thanks Brad, this is a big help. One sidenote: the href attribute in the pagination component crashed my app, I'm not familiar with the exclamation mark in href="!#", when I replaced it with href="#", and everything worked fine. I read elsewhere that using anchor tags with onClick events cause unexpected behavior, so I replaced those with buttons (developer.mozilla.org/nl/docs/Web/HTML/Element/a).
Thanks! This comment was what i needed!
this video was really helpful, I saw many of them about pagination, but this is a quality content, thank you so much :D
Kind of amazed by how easy this was, ty Brad!
Great video! I completed this tutorial, and I am looking forward to watching a pagination lesson using the back end. Thank you!
Thank you for making this so easy, I've been hitting my head on pagination for 3 days
Thank you very much :) Can't wait for the full stack video !!!
Traversy Media the best channel for web developers!!!
Many Thanks, Brad!! It really helped me.
Also I'd like to show how I solve my url issue.
I changed
paginate(number)} href="!#" className="page-link">{number}
by
: Add Link react-router-dom
paginate(number)}>
{number}
Thanks Brad! SUPER USEFUL. For the full-stack, put pagination it in your MERN stack course! I will be doing that. Thanks.
This is the Best and Easiest Pagination I've ever seen. Thank You Soo Much for this Wonderful video Brad. I'm Your new Subscriber
Great video! But regarding the number of pages that should be generated, I don't push the pages into a new array. I just use Math.ceil() to return the number of pages. For example, one could do this:
const pageNumbers = Math.ceil(totalPosts/postsPerPage) === 0 ? 1 : Math.ceil(totalPosts/postsPerPage);
Thank you so much for the great walk-through. I was able to adapt this simple code into a table that stored all my accounts.
The switch from front end to backend was also super easy. Just needed to pull from a server with my data and use a limit and offset for the data. The rest of the page work is done front end.
This is just amazing, so simple and works like a charm!
Transforming many lives with your work. You Rock
this is worth not skipping ads. as always, thanks brad :D
Man I love you I was searching everywhere for this and it works thank you so much
very good way of pagination, it helped me a lot to set up my pagination system
Amazing, been searching for something like this everywhere!
It would be amazing would be if you could do it where you don't load then unless you click second or third page etc, only load recourses required - Just like you mentioned in your video. Thanks again!
I love you Brad, you saved my life again on another project.
This method will result in slight lag when you have a lot of pages. To fix the lag, simply remove the anchor tag of the page numbers and put the onClick on the li tag .
You are the best, Im taking a bow
what a life saver!
thanks needed this for a interview assignment!
Excellent Video, Thank you so much, without this tutorial i can able to implement pagination.
Thank you so much Brad! Exactly what I was looking for. This approach was super useful for my own project.
In the video, you wrote the useState code and right after that, you showed us how actually state and useState are similar. That took at best two seconds. But this type of little things makes you different than thousands of content creator.
Please consider making a short course on Algolia with react in the future? Take love...💛💛💛
Perfect clear and simple, up to date code, and I love your voice ! many thanks
nuhun mang, gampang kaharti.. thank you sir, it easy to understand
Thank you so much. This worked for me except I also used routing (react-router-dom), so my pages don't show up for long
I have the same issue mate
This is an awesome video you saved me countless hours..
This is the best video on pagination ❤️
U have no idea how much time this saved me
I liked the video before I even watch it, because I know it's gonna be a good one as any other in that channel.
Thank you so much for the awesome tutorial!
Now I have a pagination component that can use in every project
omg this dude saved me life!!
Just used it on my project. Thank you very much Brad!
Extraordinary explanation 👌🏼👌🏼👌🏼
Simple but solves the need it. Amazing your explanation, thank you so much!
wow, you just solved my problem for my current project, well i think i have to check the full tutorial for the react
Keep post more on React.js related topics (: and congratulations for 777K subscribers
I love you so much, this one is so simple for newbie.
Thanks buddy for the example, it is very simple and correctly explained.
BRAD GOD BLESS YOU AND YOUR FAMILY FOR 100 GENERATIONS !!
Very easy to understand. Great tutorials. Thank you so much
I look forward to the course React-Native. Please do it on udemy. I believe many people expect this like me
Thank you soo much, Brad! I really needed this. God bless you.
Actually what I was thinking about last week but I have not been able to fully understand hooks. All Hail Brad T
Thank you, Brad! This tutorial was Awsome.!
Brad you are the god for many developers 🤟🤟🤟
Easy and understandable explanation
Awesome, clear and simple to follow.
Thanks a mill Brad that was excellent.....as always you explain all steps
Excelent! Thank you very much. Now I go implement Search in table!