Тёмный

ReactJS Pagination Tutorial using React Hooks 

PedroTech
Подписаться 215 тыс.
Просмотров 107 тыс.
50% 1

Опубликовано:

 

14 окт 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 211   
@pegihr
@pegihr 3 года назад
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
@PedroTechnologies 3 года назад
Awesome hahaha! I am glad I was able to post this exactly when you want to learn it!
@khandoor7228
@khandoor7228 3 года назад
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
@PedroTechnologies 3 года назад
Glad it was helpful! I agree, I prefer to do stuff manually, however using this library helps a lot!
@vedprakashsharma5640
@vedprakashsharma5640 3 года назад
Kindly create more projects of this kind to explain various concepts beautifully ..the way you have done here. Have a great day.
@PedroTechnologies
@PedroTechnologies 3 года назад
Thank you so much 😀
@fonsusali
@fonsusali 2 года назад
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
@keerthanachar 2 года назад
waw
@Farid-kg4ft
@Farid-kg4ft 4 месяца назад
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
@bablumia1774
@bablumia1774 2 года назад
Bro trust me this is outstanding
@sofumzo3219
@sofumzo3219 2 года назад
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!
@keenanreed5341
@keenanreed5341 2 года назад
Thanks! It's always a pleasure following along with your tutorials. Much appreciated!
@edu_sdorneles
@edu_sdorneles 3 года назад
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
@PedroTechnologies 3 года назад
Glad you liked it!
@sahirmmmdova5052
@sahirmmmdova5052 2 года назад
I've watched many many videos about this,but you explained it the best!
@sfybskot
@sfybskot 3 года назад
You just saved my life with this video. Thank you a lot! Everything works in the best possible way!
@PedroTechnologies
@PedroTechnologies 3 года назад
I am happy to hear this hahaha Thank you for watching!
@anirbansarkar3226
@anirbansarkar3226 2 года назад
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
@ead5590
@ead5590 3 года назад
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! ✌🏻
@alexandreluiz6182
@alexandreluiz6182 2 года назад
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!
@sahilbasnet1360
@sahilbasnet1360 11 месяцев назад
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
@benhadjyahiamehdi4772
@benhadjyahiamehdi4772 2 года назад
Lovely Video saved me plenty of time . Keep it up PedroTech
@mrnabby4178
@mrnabby4178 Год назад
Following you from a long time. You are a great teacher.
@580bulldog
@580bulldog 3 года назад
Much better than most documents I googled. Great job!
@sougataroygcettb
@sougataroygcettb 2 года назад
It's really helpful for the beginner, thanx
@PedroTechnologies
@PedroTechnologies 2 года назад
You're welcome 😊
@henriquekutner6724
@henriquekutner6724 3 года назад
Seu inglês é muito bom e só percebi que era brasileiro pelo sobrenome Machado haha Seu tutorial me salvou valeu!
@PedroTechnologies
@PedroTechnologies 3 года назад
kkkkkk muito obrigado!
@joseisraeldiazzapata5179
@joseisraeldiazzapata5179 3 года назад
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
@PedroTechnologies 3 года назад
Awesome! I can definitely make a video on this!
@teshaych2618
@teshaych2618 2 года назад
Your are such a blessing for new developers. Thanks
@cosmelvillalobos6448
@cosmelvillalobos6448 3 года назад
Hey man really good material, it helped me a lot on a project I was working on. keep up the good wok man!
@_chidiebere4763
@_chidiebere4763 3 года назад
I did not regret subscribing. Thanks Pedro
@PedroTechnologies
@PedroTechnologies 3 года назад
Thank you!
@vedprakashsharma5640
@vedprakashsharma5640 3 года назад
fantastically explained.....Great job
@ShaunDVine
@ShaunDVine 2 года назад
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.
@sdcvwdcw
@sdcvwdcw 3 года назад
Bro, I never comment on videos but I love you and this video
@sellgar
@sellgar 3 года назад
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 :(
@mkheree
@mkheree 2 года назад
Thank you. Can you please say what is the theme you are using in VS Code?
@monkeystylle
@monkeystylle 2 года назад
hi pedro do you have coupon discount on your course on codedamn?
@cristinaaguero3191
@cristinaaguero3191 2 года назад
You save my lifeeeee! I really really appreciate this video. Thank you so much
@mhassankhan8677
@mhassankhan8677 Год назад
Hi Pedro, why are you not using api instead of this fake data ?
@Виктор-э4р8б
@Виктор-э4р8б 2 года назад
Thank you very much from Belarus!
@andikafebrianto4021
@andikafebrianto4021 Год назад
Thank you for your effort, this tutorial help me solved the problem.
@leenardlacay3422
@leenardlacay3422 3 года назад
great tutorial man, just wondering how you can animate the contents when moving pages?
@PedroTechnologies
@PedroTechnologies 3 года назад
Thank you! I believe you can do that with some css animations!
@aestheticmusic3002
@aestheticmusic3002 2 года назад
It really helped man 🤠 thanks for such tutorials ✨👍
@tobiolaleye3353
@tobiolaleye3353 2 года назад
This was really helpful, but i wish the pages will refresh and start from the top when the next button is clicked
@NishantRanjan2811
@NishantRanjan2811 3 года назад
Which theme you are using in VS code.?
@PedroTechnologies
@PedroTechnologies 3 года назад
I think the one in the video i called palenight!
@hermannmarx8993
@hermannmarx8993 3 года назад
Thanks. That saved my day. The Hook makes it much easier to implement pagination!
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad it helped!
@rameljaycuna7766
@rameljaycuna7766 Год назад
why you do not create a table like the others tutorials do for pagination ang also for editing data?
@rayvincentdelacruz8251
@rayvincentdelacruz8251 3 года назад
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
@PedroTechnologies 3 года назад
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
@zoki5388
@zoki5388 3 года назад
Could you maybe make tutorial about fetching two different API and rendering data in search or in page.
@PedroTechnologies
@PedroTechnologies 3 года назад
You mean like fetching as I search on a search bar?
@zoki5388
@zoki5388 3 года назад
@@PedroTechnologies Thanka for response. As search or just rendering them on single or multiple pages.
@ganny1891
@ganny1891 3 года назад
Amazing video and well explained as well! Thank you mate.
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad it helped!
@sanjayawasthi86
@sanjayawasthi86 Год назад
Thank you PedroTech this vedio was very help for me
@blueb06
@blueb06 Год назад
I can't thank you enough mannnn ! You are the best !
@jamezjaz
@jamezjaz 3 года назад
Very very helpful! Thank you very much, Pedro. Subscribed!
@bhuvaneshwariv8287
@bhuvaneshwariv8287 Год назад
Hii @Pedro Tech im using mui for pagination so instead of select method what can I use to change the page with data.
@boonyaweeprasertsiripond4167
@boonyaweeprasertsiripond4167 2 года назад
Thank you very much! This is so easy to understand, and works exactly like I wanted it to be
@mansilaad2062
@mansilaad2062 3 года назад
Hey how we can do pagination with react and node..
@calebcadainoo
@calebcadainoo 3 года назад
Which theme do you use for your VS Code?
@PedroTechnologies
@PedroTechnologies 3 года назад
I believe this one is palenight or andromeda!
@calebcadainoo
@calebcadainoo 3 года назад
@@PedroTechnologies At thanx bro 😉
@thomashaugen1566
@thomashaugen1566 3 года назад
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
@anders8638
@anders8638 3 года назад
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?
@PedroTechnologies
@PedroTechnologies 3 года назад
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.
@VineetSingh-qg5zt
@VineetSingh-qg5zt 2 года назад
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?
@sudharshanpani585
@sudharshanpani585 3 года назад
Thank you so much, I needed this very badly.
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad it was helpful!
@federicorosales4770
@federicorosales4770 3 года назад
Excelente!! you explained it very well, ty! Greetings from Argentina.
@manikdebnath8120
@manikdebnath8120 3 года назад
Now it seems how simple pagination is! Thanks a lot
@TheGonza0
@TheGonza0 3 года назад
Great video, it served me a lot, thank you very much !
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad to hear that!
@muzardemoses
@muzardemoses 2 года назад
I love this so much, one of the best
@MrFyce
@MrFyce 3 года назад
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!
@bharathiraja9049
@bharathiraja9049 3 года назад
Thanks for sharing this video. I really loved it and implemented in my project.. Good informative and easy to understand..
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad it was helpful!
@krittikakuldipsingh6033
@krittikakuldipsingh6033 Год назад
very nice and detailed explanation .... thanks a lot 💯
@uzairmughal7461
@uzairmughal7461 Год назад
Wallah! It worked for me, Thanks Man!
@jhonjairogarcesmontes1035
@jhonjairogarcesmontes1035 3 года назад
Hey Pedro what if I want to add an animation when it changes to another page?? do I do it with CSS??
@hidayathullabhandari9419
@hidayathullabhandari9419 2 года назад
i just wantt the next and previous buttons without the individual page numbers. Is it possible?
@romimaximus
@romimaximus 3 года назад
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?
@romimaximus
@romimaximus 3 года назад
Ok, i made it work, but im try to understand how it gets the "data", and does the pagination 😁
@PedroTechnologies
@PedroTechnologies 3 года назад
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.
@romimaximus
@romimaximus 3 года назад
@@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..
@PedroTechnologies
@PedroTechnologies 3 года назад
@@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!
@romimaximus
@romimaximus 3 года назад
@@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} )}
@ikemefunanwankwo3850
@ikemefunanwankwo3850 3 года назад
Great tutorial. Very concise. Welldone!
@saksham3002
@saksham3002 3 года назад
love you dude! this really worked!
@hrishikeshpatil9896
@hrishikeshpatil9896 3 года назад
Nice bro ! Very well explained ...☺️
@PedroTechnologies
@PedroTechnologies 3 года назад
Thank you so much!
@rohangh3577
@rohangh3577 2 года назад
I have a question.. when I change the page it does not scroll up to the top automatically .. how to achieve that?
@runatrix
@runatrix 2 года назад
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.
@akinfetemitope8495
@akinfetemitope8495 2 года назад
What if I want to call another function when I click on the next or previous buttons?
@ayjayaywhy
@ayjayaywhy 3 года назад
Thanks a lot for the video man! Appreciate it
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad it helped!
@sohahashim647
@sohahashim647 2 года назад
Getting a bug when adding a search input along with the pagination. Can that be solved?
@viniciusm.m.7822
@viniciusm.m.7822 2 года назад
Muito bom, mano! Forte abraço, Pedro! God bless you!
@krishnajikulkarni8775
@krishnajikulkarni8775 3 года назад
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
@ashishdas5991
@ashishdas5991 3 года назад
Is it possible to disable page numbers that are being displayed?
@mhassankhan8677
@mhassankhan8677 Год назад
Hi Pedro, can you implement pagination using tanstack react query v4?
@happy_cutman
@happy_cutman 3 года назад
Great video, man! Thanks a lot!
@PedroTechnologies
@PedroTechnologies 3 года назад
Glad you liked it!
@DaWizardOfOz7
@DaWizardOfOz7 2 года назад
Thanks a lot mate, this is super useful!
@prashanthsura8871
@prashanthsura8871 2 года назад
displaying total data instead 10 per page, how to handle dynamic data. can you help me on this @Pedro Tech
@harishsivaramakrishnan6999
@harishsivaramakrishnan6999 3 года назад
How to implement 'Search functionality' using fuse.js for the Exact same example you took for this video. Please Help.
@PedroTechnologies
@PedroTechnologies 3 года назад
I never used fuse.js but I will take a look at it!
@harishsivaramakrishnan6999
@harishsivaramakrishnan6999 3 года назад
@@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!!
@alexsandertelles130
@alexsandertelles130 3 года назад
Bah salvou meu dia... muito top teu conteúdo irmão... continua assim.. mas faz em portugues ahahaha
@PedroTechnologies
@PedroTechnologies 3 года назад
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
@alexsandertelles130 3 года назад
@@PedroTechnologies mas ta bom de mais... eu curti muito!!!
@MrFyce
@MrFyce 3 года назад
Hello when I saved the file Prettier extension doesnt work until I restarted VS code!
@esadakman
@esadakman 2 года назад
Thanks for sharing this video. it really helped
@Vlad-us9xt
@Vlad-us9xt 3 года назад
Keep up the great work!
@PedroTechnologies
@PedroTechnologies 3 года назад
Thank you! I appreciate the support!
@Nikitosss91
@Nikitosss91 3 года назад
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
@ParadoxWorks
@ParadoxWorks 3 года назад
asking the real question lol
@shivamsingh-dt1tc
@shivamsingh-dt1tc 2 года назад
Very well explained.
@manishadey9613
@manishadey9613 3 года назад
Hey! My React-paginate page number buttons are not clickable. Any idea what's wrong? need urgent help!
@MugiAnto1nd
@MugiAnto1nd Год назад
thanks bro your tutorial help me alot
@agussartorio9303
@agussartorio9303 2 года назад
thank you rey, me ayudo mucho este video 💪💪
@mangalakarunarathne3008
@mangalakarunarathne3008 Год назад
Really helpful tutorial... 💪😍
@leannemaemillare4754
@leannemaemillare4754 Год назад
helped a lot! thanks!
@reydez84
@reydez84 2 года назад
How do i for example on the first page just show 9 and on the rest of the pages show 10
@funkybuddha1598
@funkybuddha1598 3 года назад
Great Job! Thank you.
@PedroTechnologies
@PedroTechnologies 3 года назад
Thanks for watching!
@BECSAQUIB
@BECSAQUIB 11 месяцев назад
Thanks a lot. Amazing content.
@you3667
@you3667 3 года назад
Thx. I use it to my project
@PedroTechnologies
@PedroTechnologies 3 года назад
Awesome!
@danielgreen5803
@danielgreen5803 3 года назад
Perfect, thanks man
@pdv6886
@pdv6886 3 года назад
my pagination numbers and labels not links a next or previus page, help me
@vaibhavyadav8726
@vaibhavyadav8726 3 года назад
pagesVistied should be named something like usersViewed or userVisited, that makes more sense. Nonetheless, a very helpful video indeed.
@PedroTechnologies
@PedroTechnologies 3 года назад
Yeah hahaha I am horrible with naming variables!
@rajnishkalwar1840
@rajnishkalwar1840 2 года назад
Very helpful video thanks alot
Далее
Simple Frontend Pagination | React
19:13
Просмотров 481 тыс.
WHICH SODA CAN FLY THE HIGHEST?
00:48
Просмотров 9 млн
小丑调戏黑天使的后果#short #angel #clown
00:16
НИКИТА ПОДСТАВИЛ ДЖОНИ 😡
01:00
Просмотров 148 тыс.
Context API in react | get the concept
29:00
Просмотров 61 тыс.
ReactJS Pagination Tutorial using React Paginate
21:19
Custom Hooks in React (Design Patterns)
12:56
Просмотров 47 тыс.
Why Signals Are Better Than React Hooks
16:30
Просмотров 480 тыс.
All The JavaScript You Need To Know For React
28:00
Просмотров 630 тыс.
Speed Up Your React Apps With Code Splitting
16:50
Просмотров 386 тыс.
React js Pagination With API Call Using React-paginate
27:17
Generate a PDF in React
23:38
Просмотров 16 тыс.
WHICH SODA CAN FLY THE HIGHEST?
00:48
Просмотров 9 млн