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
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!
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
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
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!
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
@@PedroTechnologies fuse.js is not important, I want Search Functionality in the exact same component in this video Any method will work for me , But the component has to be exact same like this video along with pagination. Please Help!!
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! ✌🏻
Hey Pedro, i have a question, how does react-paginate knows where to get data from ? cause i dont see it inserted inside the react-paginate ? , because im clicking the page numbers links, but it doesn´t change the pages with the next page data?
Hey, so the data can come from wherever you want it to. You just need to pass a list of objects to represent the elements being paginated. If it is a finite amount, you can just create a json file and put it there.
@@PedroTechnologiesits weird... doesnt make any sense...all i sse is {displayUsers} and bellow component, but i dont see where the data is inserted inside the , i just see the options, and thats it ..lol..
@@romimaximus The data is put into the display users function. I import a document and call it JsonData (the data being used), then I set this data as the state called users and use users inside of displayUsers. Hope that clears any confusion!
@@PedroTechnologies Ok, let me if i get it, so if i map() anydata above the component and inside the same "div" like: /* It will take whatever data inside this "div" and paginate it ? */ { data.map(item => {item.fieldName} {item.anotherFieldName} )}
So, say you have an api with 20 pages. On each page you have an array of 10 items you want to display. How can you use react-paginate to continue to display 10 new items for for each page?
Well, if you don't know the size of the array then u cant define the amount of buttons. Either you can query all items once and store it in an array, or push new items and make a new api call everytime you click on the next page button.
what we have infinite items so there will be so many button down there for each page. how to handle that...how can we trim the values like mui pagination does?
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
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.
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.
I have done the same thing in my project it's working fine but if I click on browser back button content is changing but page number is not changing plz help
Imagine that you have a hundred pages, then you will have a hundred buttons to switch ? How to implement pagination in which there will be a fixed number of buttons on the page and the value of these buttons will shift depending on where they are located
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.
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
waw
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!
Glad it was helpful! I agree, I prefer to do stuff manually, however using this library helps a lot!
Which theme do you use for your VS Code?
I believe this one is palenight or andromeda!
@@PedroTechnologies At thanx bro 😉
I've watched many many videos about this,but you explained it the best!
Bro trust me this is outstanding
Kindly create more projects of this kind to explain various concepts beautifully ..the way you have done here. Have a great day.
Thank you so much 😀
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
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!
Excellent tutorial! I had already saw like thousands videos, but this was the unique that I learned how to do this! Thanks a lot!
Glad you liked it!
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
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!
Much better than most documents I googled. Great job!
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
Thanks! It's always a pleasure following along with your tutorials. Much appreciated!
You just saved my life with this video. Thank you a lot! Everything works in the best possible way!
I am happy to hear this hahaha Thank you for watching!
Following you from a long time. You are a great teacher.
Seu inglês é muito bom e só percebi que era brasileiro pelo sobrenome Machado haha Seu tutorial me salvou valeu!
kkkkkk muito obrigado!
Lovely Video saved me plenty of time . Keep it up PedroTech
Bro, I never comment on videos but I love you and this video
Which theme you are using in VS code.?
I think the one in the video i called palenight!
Your are such a blessing for new developers. Thanks
It's really helpful for the beginner, thanx
You're welcome 😊
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
I did not regret subscribing. Thanks Pedro
Thank you!
Hey man really good material, it helped me a lot on a project I was working on. keep up the good wok man!
Thank you very much! This is so easy to understand, and works exactly like I wanted it to be
Thanks. That saved my day. The Hook makes it much easier to implement pagination!
Glad it helped!
Thank you for your effort, this tutorial help me solved the problem.
How to implement 'Search functionality' using fuse.js for the Exact same example you took for this video. Please Help.
I never used fuse.js but I will take a look at it!
@@PedroTechnologies fuse.js is not important, I want Search Functionality in the exact same component in this video Any method will work for me , But the component has to be exact same like this video along with pagination. Please Help!!
Now it seems how simple pagination is! Thanks a lot
fantastically explained.....Great job
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! ✌🏻
Hey how we can do pagination with react and node..
Hey Pedro, i have a question, how does react-paginate knows where to get data from ? cause i dont see it inserted inside the react-paginate ? , because im clicking the page numbers links, but it doesn´t change the pages with the next page data?
Ok, i made it work, but im try to understand how it gets the "data", and does the pagination 😁
Hey, so the data can come from wherever you want it to. You just need to pass a list of objects to represent the elements being paginated. If it is a finite amount, you can just create a json file and put it there.
@@PedroTechnologiesits weird... doesnt make any sense...all i sse is {displayUsers} and bellow component, but i dont see where the data is inserted inside the , i just see the options, and thats it ..lol..
@@romimaximus The data is put into the display users function. I import a document and call it JsonData (the data being used), then I set this data as the state called users and use users inside of displayUsers. Hope that clears any confusion!
@@PedroTechnologies Ok, let me if i get it, so if i map() anydata above the component and inside the same "div" like:
/* It will take whatever data inside this "div" and paginate it ? */
{
data.map(item =>
{item.fieldName}
{item.anotherFieldName}
)}
So, say you have an api with 20 pages. On each page you have an array of 10 items you want to display. How can you use react-paginate to continue to display 10 new items for for each page?
Well, if you don't know the size of the array then u cant define the amount of buttons. Either you can query all items once and store it in an array, or push new items and make a new api call everytime you click on the next page button.
You save my lifeeeee! I really really appreciate this video. Thank you so much
what we have infinite items so there will be so many button down there for each page. how to handle that...how can we trim the values like mui pagination does?
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
Thank you. Can you please say what is the theme you are using in VS Code?
Hii @Pedro Tech im using mui for pagination so instead of select method what can I use to change the page with data.
Thank you PedroTech this vedio was very help for me
Excelente!! you explained it very well, ty! Greetings from Argentina.
very nice and detailed explanation .... thanks a lot 💯
Amazing video and well explained as well! Thank you mate.
Glad it helped!
Thanks for sharing this video. I really loved it and implemented in my project.. Good informative and easy to understand..
Glad it was helpful!
What if I want to call another function when I click on the next or previous buttons?
i just wantt the next and previous buttons without the individual page numbers. Is it possible?
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.
Awesome! I can definitely make a video on this!
I have a question.. when I change the page it does not scroll up to the top automatically .. how to achieve that?
hi pedro do you have coupon discount on your course on codedamn?
It really helped man 🤠 thanks for such tutorials ✨👍
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.
Hey Pedro what if I want to add an animation when it changes to another page?? do I do it with CSS??
Very very helpful!
Thank you very much, Pedro.
Subscribed!
Thank you very much from Belarus!
Bah salvou meu dia... muito top teu conteúdo irmão... continua assim.. mas faz em portugues ahahaha
kkkkkk obrigado mano fico feliz! Não da pra fazer em portugues não kkkkkk ja é muito trabalho fzer 3 por semana em ingles!
@@PedroTechnologies mas ta bom de mais... eu curti muito!!!
Is it possible to disable page numbers that are being displayed?
Nice bro ! Very well explained ...☺️
Thank you so much!
Hello when I saved the file Prettier extension doesnt work until I restarted VS code!
Getting a bug when adding a search input along with the pagination. Can that be solved?
Great video, it served me a lot, thank you very much !
Glad to hear that!
Hey! My React-paginate page number buttons are not clickable. Any idea what's wrong? need urgent help!
Hi! only my previous and next buttons are blue, the other buttons, i.e. 1,2,3,4,5,6 are black although I applied the CSS of colour to blue!
why you do not create a table like the others tutorials do for pagination ang also for editing data?
my pagination numbers and labels not links a next or previus page, help me
How do i for example on the first page just show 9 and on the rest of the pages show 10
I have done the same thing in my project it's working fine but if I click on browser back button content is changing but page number is not changing plz help
Could you maybe make tutorial about fetching two different API and rendering data in search or in page.
You mean like fetching as I search on a search bar?
@@PedroTechnologies Thanka for response. As search or just rendering them on single or multiple pages.
E se eu tiver muitas paginas? O que posso fazer
Gotta ask...
Why use yarn over npm?
It's faster.
displaying total data instead 10 per page, how to handle dynamic data. can you help me on this @Pedro Tech
merci Pedro menât je suis fort en react avec votre formation
This was really helpful, but i wish the pages will refresh and start from the top when the next button is clicked
I can't thank you enough mannnn ! You are the best !
Thank you so much, I needed this very badly.
Glad it was helpful!
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!
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
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 :(
Hi Pedro, why are you not using api instead of this fake data ?
great tutorial man, just wondering how you can animate the contents when moving pages?
Thank you! I believe you can do that with some css animations!
Thx. I use it to my project
Awesome!
Wallah! It worked for me, Thanks Man!
Thanks a lot for the video man! Appreciate it
Glad it helped!
Hi Pedro, can you implement pagination using tanstack react query v4?
thanks bro your tutorial help me alot
Muito bom, mano!
Forte abraço, Pedro!
God bless you!
thank you rey, me ayudo mucho este video 💪💪
Thanks a lot mate, this is super useful!
The page numbers get spread all over the page so what to do?
Thank you for video. It help me so much
Imagine that you have a hundred pages, then you will have a hundred buttons to switch ? How to implement pagination in which there will be a fixed number of buttons on the page and the value of these buttons will shift depending on where they are located
asking the real question lol
I love this so much, one of the best
Really helpful tutorial... 💪😍
Great, want same in nodejs too
Thank you!
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.
bạn có thể kết hợp với search không help me
love you dude! this really worked!
I am so sad i need to like the video but its at 420, im sorry man im gonna do it, the tutorial its to good
How to paginate between different components?
Great video, man! Thanks a lot!
Glad you liked it!
Very well explained.