Pagination In React | The Best Pagination In React | React Interview Questions | React Pagination

guys the next question he asked me was to implement basination he had shared me this API link this is the Json placeholder API and there are 200 random to Do's in this so he wanted me to display all these 2002's and Implement designation okay also along with the periodation he wanted to have a drop down from where the user can select the number of to-do's it is played at a time and of course there should be a previous and next button with the basic Nation okay so to do that first of all I'm going to import use state and use effect works from the API so that we can store the State different states and call the API with with use effect and I'm also going to import xeos to call the API okay first of all let's create a new state and let's call it to do's and a function to set it is set to Do's equals to use State and initially let's say it's an empty array of to-do's and to call the API with hooks I'm going to use use effect and here we can pass the logic and after that empty array which means it will behave as a component rate mount it will only run the logic for the first time the component is mounted and that's what we want we want to call the API only once when the component is mounted for the first time okay here I'm going to write xios dot get because this is a get API and let me copy it and pass the EPA to it and write then which takes a callback and Returns the response and here I can write set to do's phones dot data and let's save it with that reph will be called for the first time and it will save all the to-do's in this to-do's variable okay now let's use this to do variable and I'm going to write to Do's dot map this takes a callback and here for time being let's add a P tag to see whether we are getting the uh to Do's or not and here I will pass to do Dot add me because in the API you can see every to-do has a title and ID key as well so I'll use the title here and that IDP we can pass as a to every V tag to do dot ID okay and let's save it it's working fine as we can see all the 200 to Do's here okay now the next task is to at the beginning and to add the presentation first of all we need to know the total number of bases which should be displayed here for that I'm going to create a new const um of total is equals to be calculated with this formula at dot CL which basically rounds up uh the given number to its closest integer so for example if a value is 4.7 then this will return 5 if the value is 3.2 it will return 4 because 4 is the closest integer to it and it rounds up okay and here I'm going to pass to do's uh the studios which we are getting from the API Dot length the length is 200 divided by let's say we want to display only 10 twos so here we will pass 10 if you want to display 30 we'll pass 30 50 then 50. okay for now I'm just writing 10 here and the better way would be to create a state to this value 10 so that we do not have to hard code it here so I'm going to write to Do's per is and set to-do's per days equals to use State and then pass the value 10 here and instead of hard coding this 10 here I will pass to reduce purpose now now we have the number of total Pages if I simply go ahead and play it here let's say H1 and then pass this value number of total pages and Save and scrolled till the down you'll see we get 20. because there are 200 to Do's divided by 10 becomes 20. if I make it 50 and Save now you should see 200 divided by 50 uh four pages correct so here are the four pages but we do not want to display this 4 we want to display a previous button then one two three four and uh next button right so for that we need to create a array by using this number the number of total pages to create a array with a number I'm going to write a new variable Pages because these are the pairs only which we are going to display one two three four and here I can create a array and pass it the number of total Pages let me show you what it gives us uh console DOT log Jesus okay and let's go to console and save it you can see guys it gives us a array of four and defines okay because we have passed the number of role queries here which was four so it gives us a array of foreign defined if I make it in here then it would give us a array of 20 and defines okay and if I make it bigger you can see each undefined has a index also from 0 to 19. so we will be using this these indexes only to this to uh create the basic motion and since it starts from zero and ends at 19 but we want to display uh the position we want to start the basis from one and we want to end it at 20 correct for that we can add a plus one here and if I save it I will see it starts from 0 and it ends at 20. now in our code we can just ignore the first index and then it will start from 1 to 20 okay and for that I'm going to write these an array and I want to spread it save it now you will see in the array we have the 0 to 20 but I do not want to consider this 0 for that I will simply use the slice method of array and pass one to it which will kind of ignore the first element in the array and let's save it is now we have a array of 20 elements starting from one and it ends at 20 that's exactly what we want to display to the user right so now let me delete this console and these spaces I can instead of this number of total pages I can use phases Dot map and page and here I'm going to use a span so that all the page number uh displayed in a single line if I use a p or basically a block level element then they will be displayed in a different different line like one two three four five like that but you want to all of them in a single line so I'm using span here and I can pass a base and every element should have a key so I'm going to pass E equals to the base okay and instead of this H1 I'm going to use a P tag okay and let's save it and check how it looks okay so now we have the basination here for these Pages uh traditionally use these phases I'm just uh going to add a pipe here so that we can clearly see that this is the base so I'll use a string template here and this will be dynamic value and let's save it that you can see we have a pi between and let's add a space Also now we can clearly see that okay these are the different pages and I want to have a previous button here and the next button here for that I'm going to add a spam and which says previous and let me copy it and paste it here let's call it next okay now you can see like previous and next now to select any of these we need to have a state and let's call it current days and here I'm going to say set current is equals to use state the initial value would be 1 because For the First Time the first phase would be active now we need to find a way whenever user clicks a button we want to get only those to Do's uh which should be displayed on that page right so if I click page number 10 then a set of to-do's which are associated with page number 10 should be displayed nothing else right so for that uh we have our original to-do's and uh when a page number is clicked basically we will display a portion of all these to do so all the number of voltages is 200 and whenever a piece is clicked we will pick some set of to-do's from these 200 right and to pick the set of to-do's from the original to do I'm going to create two variable one is const uh index of last to do equals to current base into a to-do's per page so what's going on here is we are just calculating the index of last to do current page so let's say I am on page number four then the to-do's displayed will be from 30 to 40. so I'll just say current base is 4 and to Do's purpose is 10 so this becomes 40 right and similarly I can get index of first to do right I'm going to write index of last to do minus produce bird base so in our example if the Base active is 4 then last is index is 40 then 40 minus to lose per base will become 30 because this is 10 in our case right that's how we get the indexes first and last to do and now this portion only like from 30 to 42 is only going to display and to pick a portion from uh array we can use slice method so I'm going to write here a visible produce okay and here I'm going to write produce Dot not shifts it's called slice and here we can pass a start and end index so first I'm going to pass the first uh first index and the second parameter I'll pass the last produce index okay and by default slice does not include the last to those index so if I pass one and three here then it will pick one and two only it will ignore the last index we're defining all the 200 to Do's here instead of displaying all the 200 to Do's what I'm going to do is I'll say take visible to-do's and save okay with that you can see we have only 10 to-do's visible because we have set to those purpose is 10. now if I make it 20 and save you can see there are 22s displayed okay so let's uh three back to 10. the next thing I want to implement is whenever a user click any page I want to change these to-do's according to the page which is clicked what I need to do is so this is my page here I can add a own click event and inside me on click event I can call this uh Set current page because whenever user click any page technically the user is changing the current page only correct so we will call different ways and pass the page number to item so guys with that if I click any of the page number let's say 13 the to do changes nine changes and so on so this is working now I want to implement the previous and next functionality and before doing that let's let's add some Styles also here so that we can see which uh button is I mean which phase is currently active Okay for that I'm going to write a class name here and inside that I'll write a back trick and I'll write current base that is equal to the page I clicked right so I want to have a active class for that will Define the active class in a y and otherwise I'll just keep it like this and I think I have moved I think it should be inside the battery not outside so let it move it inside and save it and now let's define the active class in the styles.css by the way we are importing sites.css here and here I can just write the active class color is purple let's say and just make it really clear that this is active I'm going to increase the font size also and let's save it and there I'm going to save it that if I click one it's not working there is some problem let me quickly check it what's the issue well it should not be closed here actually it should be closed at the end let's save it first time will some issue that unterminated string constant so okay I forgot to add the string close the string here I will save it okay with that you can see the number page number four is active if I click 10 this is active I click one this is active similarly we will implement the previous and next button logic we just need to check if the active base is one then previous should not execute the logic metabolasically right and if the active base is 20 then next should not do anything okay for that let me add event listener on click and here I'm going to write previous is Angler and similarly to the next and right don't worry we are going to write the logic for it in a while and here I'm going to write next phase Handler okay now the first let's write the previous page Handler and so this huge effect should be at the top note here so let me right here this is the conversion guys so your hooks should be uh in the sequence right now we have all our variables here then I'm going to write const PBS page Handler equals to this and as I said first condition would be if current pays is equal to one I don't want to execute the logic so let me make it a node operator here and then this is the record is not required because this is a one-liner so I can write set print page and I'll just decrease one from the current page so what it is doing so if it is let's say the active phase is 12 and I click previous correct then it will just move it to 11 by using this logic current page minus one similarly uh let me copy it and here I'll just write next and instead of one this time I'll pass the number of total Pages the number of total pages is here let me copy that and paste it here and save it and instead of minus we can make it yes now let's try uh if I'm on the piece number 12 I click previous it takes me to 11 then 10 and 9 similarly if I click next it takes me 10 11 and 12 guys the next thing I want to implement the only thing pending is we want to have a drop down here by using that we can control how many to-do's will be displayed will be visible to the user so by default 10 are visible so we want to make it Dynamic for that I'm going to write uh HTML select element so I'll try it select here and close it and now we have multiple children inside a written method so we can use this is a perfect case to use react fragments and inside that I can 50. now you can see we have the different values here and now the only thing is whenever the user selects one of them these visible to do should change okay for that I'm going to write a own change event listener which takes a callback and gets a event okay and then I can just uh hit set rules per pace and by default it was 10 now it will be event Dot Target dot value and save it there is some issue actually it should not be a round bracket it's a curly bracket so let me change it and save it cool let's go to first phase and we have 10 produce now if I change to 30 you can see we have 30 and the page number is also got re-rendered accordingly so we are displaying 30 to Do's per page and there are 200 uh to Do's right so it makes sense that there are only seven there should be only seven pages and now if I make it easy to 50 then there should be only four pages and guys we have four pages yeah if I click next it works if I click previous it works if I click any specific button specific place it works so guys this is implemented if you fail we can improve The Logical presentation please comment below

Channel: itsCodingDoctor

Views: 5,974

Keywords: react, javascript, frontend, software, development, coding, tutorials, redux, html, interview, css, git, json, node, mern, job, preparations, code, learn

Id: Ve2XBkggF40

Length: 19min 36sec (1176 seconds)

Published: Tue Nov 22 2022