React Js Pagination With API Data

1. Introduction: Welcome to this React JS Course. My name is yes then each Audrey and algorithms dr. In this course. In this course, you are going to learn how to build our React application and how to add react pagination with real-world API data. As you can see that this is the project that you are going to build in this course. So here we are getting list of information from an API endpoint and we are showing our API data in a card view. And as soon as I hover over the card is gonna show Small border in the left side corner. And as soon as I click on this one, is going to expand. And then we can see rest of the information. In this course. You are not only learning the React pagination, you will also want to learn how to add collapsible shown in reactor chairs. And if I click on this, one is going to open and then it's going to also mark, this is how we implement react collapse of Shun. And then in the bottom you can see this React pagination here. Currently I am in case number one, there's a reason that and this one is marked white color. And if I click on the test number two, then these two is going to highlight. And then this previous button is gonna enable if there's number one, then previous button is disabled because before one we don't have any base number. And by clicking the next button, I'm also able to move one base to another base and E space we are showing, we are showing and this list of data. And then if each and every base we have refund data that we're getting from our API endpoint. And then we can just show it to you can just filter our data using our pagination. So I tried to add all sorts of pagination features that normally we see in preference replication. So if I went the last base, so then the next button is going to decibel. And then we have also endorsed, it means that is keep the base number. So apparently I have added this number five. So if I click on it, then it's going to escape this number five. Type fit is going to keep at the same time. So now we're in case number three, and if I click on it, so now we're in verse number eight. So definitely you can change it as you want. So instead of five, you can show to see, and you can also dynamically change the color, background color, and the pagination designs. I tried my best to explain each and every line of code of this project so that you understand everything and how to deploy a react JS project to Netlify so that people from around the world can access your application. So we're going to use a Cloud platform to deploy our project, which is called Netlify. You can see that this URL, currently, this project is to live on this URL in Netlify. You will also want to learn how to deploy this React JS project. Therefore, I will highly encourage you to enroll this course. See you in the lecture. 2. Create React Project: Welcome to this lecture. In this part, we're going to start working on our React JS project. For that, first and foremost, we'll have to create our React JS project. As you can see, I have opened my Visual Studio Code, but currently, I don't have anything here because I didn't install the project yet. So in the fall of the directory, we need to import our folder. So first thing first, what you need to do, you just need to create a folder. For example, I'm going to create my folder inside this folder directory, for example, videos reactivity, an issue with APA data. And here I'm going to create a new folder. And I'm going to say React pagination. React pagination. And inside this folder, you will have to install your project. So now what I'm gonna do, I'm gonna, I'm gonna import this project in my Visual Studio Code fast. So you can see if you click on this icon, it will show you this Open Folder directory. So click on Open Folder. And then I'm gonna go to this video and then this fall, and this is the folder name that I have created. I'm going to select it. And here you go. Again, we don't have anything inside this folder. As you can see, it's just an empty folder. We don't have anything inside this folder. We are going to install our reactant JS project. This is how we will work. Alright? You just create a folder anywhere in your labs, in your laptop or desktop. And then just import the folder here and now open your terminal. And we are going to install our React JS project. So what I need to, I will have to write here, I'm going to say NP x and then Create React app. Okay, so one thing you must write the paragraphs polling, so NPH, React app. And then I am going to say the name is client. The sprint example. You can give any name, whatever name you will give, your project will be under this name. For example, we are fronting, we are working on pagination. So pagination is normally used in the client side, which is the front and side. Still the reason that I am writing client-side. So NP x Create React app client. And now it is going to install our project inside this folder directory. It will take couple of minutes depending on your internet speed. And you can see the folder has been created and the package.json has created. And it is going to create a couple of more items, couple of more project. And in the meantime, I can show you few things that will required for our project. First of all, I'm going to show you how can we use bootstrap into our project. So because I'm gonna use some Buddhist stop. So I can say Buddhist off. And it will be required for us, so I'm going to agree on it. So this is the official website, often get Buddhist staff. And from here you can read a lot of things. You can simply install their NPM package. They do have it, but the easy way is to use the link. So you can see introduction and then Quick Start. There are some links that we will need. For example, this one. We can just add this one here. So they have CSS property and other properties here. So for example, let me check, download source code. So they might have a link called get started. So we can also do it from here. Not a big issue here. I think we will have to copy this one and then these two file that we will need to install. Okay, so we can get our, we can get our Buddhist start from here. And we will install one more packet, which is called NPM react pagination. This is how we'll use our pagination. So React, pigeon it. This is the package name. And let me see how it goes now. So it's still, it will take few moment. And this is our pagination package that we will use. This is the we have this option and you can simply read their documentation if you want, you can simply good ideas about their feature are the options how to use this one? And they have couple of proofs that we will obviously use in our project. And I will show you how to do it. How well does this break class means on, with chains on plague. And they have a lot of things. So you can simply play around here and then you can just get some ideas. And obviously I will show you how to implement this one. And we will install, we will install lighting. What else we need? We'll need our red icon so poor that they have another package called NPM react icons. We will use React icons from this NPM package, red icons. And we will need, we will need our API data. So this is the red icons that we need to install in our project. And then we need another thing which is our APA. So we'll use our public API so that you can learn how to use APA data. So I'm going to say JSON placeholder. So this is the website from where we will get our free APA link. And they have lot of options. For example, let's say I'm going to select this post. So we will get our APA in data from here. We have title and body and ID. We will copy this link from this. Alright, so it has installed Node modules and a couple of things are going to add here. So I will show you this one also. And it might be helpful. Okay, so we are about to finish and I think we, we got all the required packages and I will show you how to install it and how can we activate. Okay, So to collect our rate icon they have there are react icon website. I think this is their homepage. So here we go. No, this is not the homepage. They have a website from where we can atomically here, from where we can get this one, not this one. I can say React icons. Icons here. Okay, So this is the official website of React icons. So once we will install our reactor icon in our project, we will have access of all of these icon. Then we can use whatever we want. We just need to import the name. And then it is going to work in our project. So it's very easy to use it. It just take few seconds. Alright, so our project is ready and it, it says some instruction how to run the project. So we can see this is our folder directory. We have this AB don't chairs and all other file. First I'm going to run this project. So we need to move to this client directory. To do so, we need to write here CD client because our project is installed inside this client folder. So we need to be inside this client folder in order to run our project. So to run our project, we need to write npm start. And now it is going to run our project and we will be able to see it in our browser. And let me show you if it is going to work. So here we go. This is our project. I hope it is going to work because it should work. We didn't do any mistake. And we can also see the update and if you get any kind of errors, so it is going to show here. And you will also be able to see it in the browser. I don't have any ideas why it is taking so much time. So in the meantime, I can give you some instruction about the folder or directory here. So basically, we will mainly work under this source directory where we will create our component and all the file. You can see this is our main file that contains the whole data right now, but we will modify it. And then we have this app dot CSS. And this is the public directory. And inside this public directory we have our index.html. And we specifically run, when we run our React project on any kind of browser, it seems that to compete successfully. So now we should be able to see our project. So here we go. This is our reactor cheers project. We don't have anything currently, so we will have to work on it. And I'm going to stop this video right here, and we'll continue with the next lecture. 3. Install React Packages: Welcome back once again. In this part, we will start working on our React JS project. Last part, we were able to run our project and then we install our React JS in our computer. So now first and foremost in this part, I'm going to install all the required on the required packages so that we can continue working on our project. So to do so, that means stole this 1 first. And so we'll have to install React icon. So simply click this red icons, clicking here, and then open your terminal and to make sure that you are inside your client directory. Because remember one thing, all of your file, all of your packet shared and folder inside this client folder or whatever folder name you will give. So you always have to be inside this folder where you installed, you'll react JS project and not your main folder directory. Okay? So to do so fast, I'm going to move to this client directory. So acidic client and then I'm going to paste npm, I react PyCon, and then it is going to install. And it might take few times then. Okay, So it has installed, I guess. Now let me show you something. So if we open our, if we open our package.json, then we will be able to see red icon has added over here. Now let's install React busy-ness. What that will do that is required for our pagination. So now I'm already inside this directory, so I'm going to paste it and then I'm going to install this one. And it is going to add over here, react paginate. Alright, so we have installed two required packages. I think we will not need any more packages, but for this one, we will just use this normal link. So before that, let me modify this one so that we can understand that our changes are going to add it in our projects. So now all of our code inside this app.js. So what basically I'm gonna do, I'm gonna select all, then I'm going to remove because I want that, you know, everything, every line of code that I'm going to write here, There's a reason that I have removed all the auto-generated code that was created by React js. So first thing first, we need to import our React from from our React. And then I'm going to add a arrow function. So I'm going to say console app. So remember that you need to add your name f here. Otherwise, it is going to give you an error. It doesn't mean that you can't change the name of your component. Definitely you can do it, but for that, you will have to make some changes. So I will show you export default. Then I'm going to add this app. So what I mean by this, so if you open your index TO jaws, index.js and here are your app folder is your F component is connected and this index.js and basically run when we start our React JS projects. So there's a reason that you make sure that you're this component name is f, or if you make any changes here, then make sure that you added this one. And this is how these reactors we work on right now. Here we must have written our f. So for that, I need to say return. And inside this return. And we need to add our, we can say React dot fragment because we might add multiple children here. So there's a reason that I want to add React dot fragment here. So for now, so for now, just for an example and testing purpose, let me add one, let me add one thing here. So let me add a few. Just for an example, you can say hello, React. And I'm going to save it. And now if we run it, we can see Hello React. Now it's time to test our add our Buddhist stub produce so fast. I will have to add this link from here because this link will give us the CSS part of this Buddhist stuff plus of this Buddhist art class. So I'm going to copy this one to add Buddhist stove and open this index.html under this public directory, click on it. And then here in your head of this one, you need to add this one. And it should add, it should work here. And then there is two JavaScript file that you might need depending on the feature of Buddhist or you're using. So I'm going to just copy it. You don't make you do not create any problem. Rather, we will get some benefit if it is required. Alright, so these are the two links, three links that you can get from good Buddhist stuff and you're just going to add to your He's going to enable Buddhist of features in your React app. So just for an example of testing purpose, let me define a class name here. And then I'm going to say card. So car is a Buddhist or property. If our Buddhist stuff is working in our project and we should be able to see a card. Here we go, we can see our card. It means that our Buddhist stuff is working here. Cool. So now, what can we do? We can create a component file here. Inside this component, we will work our project. We can say, we can say component. They can say component and this component, we can create our different file and folder. Okay, so we can, first of all, first of all, let's create a file here. Let's create a file here. And we can say, we can say, for example, maybe we can say data. Or we can say, So what do we basically want to build? We basically want to build a component built up, built our education system. But for pagination, we will create a separate folder for this one, for this data, We have another one. Let's say, we can say here. We can say here information. Information. This information will contain our lead information on mainly hold our API data. So we can see inflammation dot js. And now I'm going to enable this one. This is going to help me. It's kind of a snippet that I'm using Fourier series. So you can just create a component here which is going to be inflammation. And then we can just do this one. Okay? Now, if I know what I need to do, this information will hold our whole our whole part here. Or if I do so over here, then is going to be part of this one. So I'm going to import this inflammation component that will contain our whole data. And then I can simply call this information here. And we can see this information, we can see this text. And now inside this information, we will get all of our API data and we will also add our pagination. So whatever component you create, make sure that it is connected with your app.js, which is connected to the index.js. And this is how it will work. Now, we don't need these two file. Okay, so if I want, I can also do the same thing here, but I want to separate it so that you can learn how to create component and how can we connect each other. So first thing first here, we need to, okay, So first let me add some decent option here. We don't need this information here. So inside this div, I'm going to create a class name. And here I can say container. Container. And this container, container means, okay, so we don't have any data here. So we need to add H1, I can say Get info. And here it goes. So if we add container, then it is going to start from the middle of this all fit. So this is how mainly most of the waves said has this features. And there's a reason that I am using this container. Now, inside this container, we can create our we can add two are going to start adding our data. So for that, first, I'm going to create a CSS file here. We can say information though, CSAs, Inflammation dot css. And then I'm going to say Import. And I'm going to save it here as our inflammation is connected with this one. Now I'm going to create another folder here. And inside this folder, inside this div directory, I'm going to create a class name that will hold our whole data. And here we can say in for design. So this is our infill design and these info design, inside this info design, we will have our ACE to Tech, for example, is seven. And I can send that information. I can say list of information, for example. And now we can make design here. So using the left side, but it should be in the center, but it shouldn't be in the center. So I'm going to do it. I can say, then I can say A7 and then I can say, okay, So it should be A6, A7. There isn't any particle is seven. So I can say is seven here. So A6. And now I can say text align, center and margin, top, and margin tolerating 50 pixel. So here you go. This is our list of information using the center and we've got some margin from here as well. Cool. Now everything is fine. And after that, this container here, we will have to create another folder or another file where we will show all of our data. And another thing we need to add our APA has, so for that, what can I do? I can simply create our variable. We can say const, URL. And then I can simply do this one here. All right, so from this URL, we will get our JSON data and we will show it in our application. So I'm going to stop this video right here and we will continue with from the next lecture. 4. Get API Data: Welcome back once again. In this part, we will try to get our data and we will try to show it in our application. We were able to add this list information here. And now in this part, I'm going to add our users to hook. That will help us to get our data from our API. So for that, we need to add our uses that hoop and use effect hooks or uses that. We can say for this, uses that. So uses Ted Hope and then use effect hoop and then use effect Hooke. And over here, I'm going so fast I'm gonna create. Instead we can say const and you can say data is going to be set data. And then we can add uses debt and it's going to be an empty area because we will get our data and we will set our list of array inside this. Uses it hook. And alright, so here I'm going to create a new folder. I'm going to say const lot. It'd be a lot API. It'd be a lot FBI data. You can give it any name, whatever you want. You can give it any name, whatever you want. So it's just a function name. And inside this function I'm going to add Fess. What is fast? Basically, fess is a pre-built with the browser. It helps us to get our data from server or any kind of API. But if you want, you can also use zeros, which is n, The Becker's. But for me I love to use this one and it is going to do everything for us. So phase and from where we want to get our data, we want to get our data from this URL, which is this URL. And you can see that this is the API endpoint. Mainly we say whatever API endpoint you have, you can just use it here and then it pass a parameter. So one is going to be methods normally is by default is method is good. But if you want, you can also mention it and get it has four more, four other properties. For example, GET, post, PUT and delete that you will need if you perform delete operation or other stuff, then we need to, we need to convert our data into a JSON format. So because by default this face can't convert our JSON data, then we can say response is going to be a risk bonds dot json. What does it mean? And what do we say it here? We said here, whatever response you were getting from this URL from our API endpoint, just convert it into adjacent format. And then only we can show our data inside our app. Alright, so now I can add another than here. And then I can say, if you have, if you have converted it into JSON format, then we can get our result. We can say result. And then here we can see. We can also guess the uterus. If there is any euro, you can think as scarce. And then we can simply say, console dot log is going to be this error. And I'm going to add this one. So our result, I mean our data is now inside this result. Now we need to set this result inside the set data, which is our users to talk. So we can say we are if you want, you can also add a condition here. So if our result, it means that if we get the result, then only we can set our data here. And then the result is going to be inside this one. Now, our users stood for contain this whole data that we will get from this API. Let me format the code. Alright, now we need to add our US effect so we can say use Effect. And then here we can add this one. And here we need to add a defendant is independence era, because we want to render our API and data only once. If you don't add this dependency area, then it is going to render the same thing again and again and again. So we are mainly, we're really saying here. So whatever data you will get from this API URL just affected or just show it on just loaded, at least, just at least once. You don't need to do the same thing again and again. Now I'm going to copy this function and then I'm gonna paste it here. Cool. Now we have this one so our data is ready, but still we won't be able to see anything because we didn't use our data. So let me explain you one more time. So we basically created a users to hook and we are getting our API data using this phase URL. And then we're just saying that if we get our data, just, just add this data in our users to do. Now, we can access our data using these data. To do so, for example, I can add, I can just try it. You can say, you can say, I guess it's just some dot stringify. And then this data, so it will give us the JSON format of our data just for testing purpose in case we get it. So we can see we've got all of our data from this API and find, but this is not the way to show it obviously. And we will definitely format our code and we'll add color absorption or some other things that we will do here. Don't worry, it means that we are able to get our data. And in the next part, we are going to show our data in our design format and we will make it a more human readable. So I'm gonna see you in the next lecture. Bye bye. 5. Show API Data in a Card : Hello, welcome back once again. In this part, we will design our data and we will try to show it in a card. Okay, So how can we do it? To do so? I want to remove this one because we don't need this thing anymore. So now from here, we can add our descend, descend part. So now we can see that we don't have anything in our list. So how can we add our design here? So first and foremost, what I want to have, I want to create a first. We need to move through our data that we're getting. So we're gonna get our data from here. I can say that delta dot map, you need to map through our data and I can say d. And you can add any name, whatever you want. And then I'm going to add index position here. And from here, we can do it. Now. I can see this div, and then I can also see these tiff. So both are same here and now here I'm going to add a class name. And class name I can say card. And just for an example purpose, I'm going to add, I'm going to add title. I can say title. And let's see what can we see here? So we can see this tight here and we can also see this cart. But this is looking really bad and we need to fix it so we can add and design option here. So there are two ways to do it. Either we can simply create a class name here, and then we can call it in this CSS file or another one is there is a property in React which is called a style. And then I can simply add double curly brace. And then if I want, I can add margin. And then this margin is going to be ten pixels. Now we can also see this margin, ten pixel, and then we can also add padding here. You can do almost all the CSS properties here. We can say ten pixel. Here is going to add some padding goal. So you can add any CSS design within this line. But if you were just using simple thing, sharp design, then you can do it. But if you are using a lot of things, then you can simply separate this one here. So I can simply say card design isn't, this isn't a separate class that I'm going to create. And I'm going to add it here. Now, if I look at the browser, you can see we don't have any design now. So I can say margin ten pixel, and then padding is going to be five pixel. So we have this title, we have this bedding, and we have this margin. Now we can replace our this title with this data, with this title and body. How can I do it? To do so we can add, instead of this title, we can simply say this title and remember that you have to write the same name. Same is being whatever it is in APA. So it's going to be title here, Rico. Okay, so the title is more defined because our data is in this one, so we need to write dy dt or title. Now we can see our title from our API. How cool it is. One thing I want to customize it here instead of this is I is one. I'm gonna make it a six so that it looks smaller and nice. Cool, it looks really great. And another thing we can do here, we can do what can we do here? We can add a p tag here for the body, I mean, for the main text. And there is one I can say, which is the property, what is the property name? The proper name is body. I can say this body, DIE daughter, body. And here we go. So now we got our title, we got our description from our API. It means that if you want, you can also retrieve this ID. That's not a problem. You can get anything from the, from the API, whatever food they have added some d dot id. Now we can see our ID here. See Heidi, 123456789. Cool, but we don't need to have this id here. Now, this is the one way to do your card design to add API data in your project. Now there is another way to do it and what is it? And so now we are doing everything in this one file, which is not good for our projects. For example, you are working in a big project, then it is going to be difficult for you to handle all these things. So for that, we will separate this design part in a different component file, and then we will add it at our component here and we will show it here. This is the most easy way that most of the company do. Most of the people do. And now I'm going to stop this video right here. And I will show you from next lecture. 6. Show API Data and Card Design: Welcome back once again. In this part, we will create our separate component for our data and then we will show our information. How can you do it currently, we have all our information here and it is looking good, totally fine. But I want to show you something else. I'm going to create a new file, new component called data, or we can say show data whatever you want, then js. And then I'm going to create this component. So show data, and this show data is going to contain all of our information. So I'm going to say React dot, dot fragment inside this object dot fragment. So what we will have to do basically here, we will have to add this part in our design. So you have to add this one here. So show data, I'm gonna say, okay, I'm sorry, we don't need this one because we already have this def inside this one. So I'm going to add this one. Cool. So now we have this card, card design, title and body. And here we don't have anything. Now, what about design? We had earlier for this one, and obviously it's going to give us an error for this one. Now, it is in this component, no question is that how we will access this data over here in this component for that, we need to pass our props. So add double curly brace and add title. And then add body. Makes sure that the same title on the same name you are using that we have in our API. Or you can also change the font, then you will have to make it. In other words, now we don't need to have in d dot title, rather we just need to say title and then we just need to say about it, okay? There is nothing more changes here. It is going to work in this part. And now we can call our, we can import our show data component. So we can say Import show data. Now, this data contains all of our data. So what can we do? Basically, we can simply call this data. And we can see this one here. Now let's see what can we see? So now we got a 100 card, but we don't have any data here. We've got a 100 cadets, true. We've got a 100 card because we're just rendering this component, which is this component. And, but we're not getting any data because we didn't add our data here. How can we add this data? So first we need to add a key. So let me show you what does this key means. So if I right-click and if I open my console, then you will be able to see it is giving me an error and it says that each child in a lease should have a unique key props. So we need to have a unique key. So what type of key we want we have, so we can say key d or id. So because the ID is unique, so you can see this, we can use this key. And then if I refresh this one, then we should not get this error anymore. See, euro has gone. We can see this one. There is an error anymore. No, you're okay. Cool. But still we don't have any data because we didn't add it. So now what is our probes are prophecies these title. We can do this in this way. We can do this thing. This we can say title, which is our profit, is equal to our Indeed or title. So d dot title. And now it's going to show our title. So another thing is noticeable here is that this title indicates your component title. So if you are using this way, for example, if you were doing this theme in this way, ddo title, then you don't need to write the exact same API title name. You can add whatever name you can see. We can say new title and just make sure that you are using this one here. And then also here, this new title and ddo title. So it's still, we will get our state, we will get our data. So why is it is because that here we are saying that deed or title and this title is our API data title, which is matches here. Okay, So if you were doing it in this way, then it is not necessary to add this one. But there is another way. For example, you let say you have 100 items, 100 items you are getting from an APA. So will you do this thing? You will write this a 100 things in this way. Obviously not for that we have another alternative and the solution. So what we will do, we will pass this column list and then we're going to use a spread operator and then we're going to pass this d. So what does this d? So as you already know that this D was containing all of our API data. And what do we say it we said is freed up or D, It means we're going to add everything in this component is kind of adjoining thing. Now, if I Open React, then what can we see? We can see our body model, we can see our title. And if you look at here, this text is contained in the first item. In the first item of this one, this body, and this is the second body. The second body is because that I met changes in the title. Okay. So if I changed it to title, then we should be able to see our, we should be able to see our text, our title, you can see now we have our title, we have our description. So this is the way that you can use this one. So now we can see I have just added a one month previously, I was writing this title, then equal than, than colleague breadth than d dot title name. This way I had to do everything so I can do it in this one line instead of writing two or four times, maybe a 100 times, based on your API design. Cool, it looks good. Now I want to have some other features. For example, I want to show the title fast, and as soon as I click that I want to show, I want to show the collapse of Sean. Okay, So kind of collapse have shown that we basically see in different kind of application. For example, I can say how to show collapse here. So in the Google they have in this collapse option, okay, so if I click on it, it's going to open the window and he's going to show the details. If I click on it, is going to hide, is going to open, is going to hide is going to open, is going to heighten the same pictures. I am going to show you how do you implement it in this project. Okay, So we'll do it, we'll start working on it from next lecture. And I'm going to stop this video right here and see you in the next lecture. 7. Card Collapse Features: Welcome back once again. In this part, we will try to add our collapse of Sharon. Okay, so the thing is that I just want to show this title in our card. As soon as it's ready, we'll click on the icon or whatever in this card. Then we will show them this or this details text so that you can learn how to use collapse of Sean in reactors. So to do so, you can see that currently this part is going to hold our design section. Here. I'm going to add a user state hook. I'm going to say use a state. Here. I need to define the state. So I can say const is going to be a Boolean instead. I can, I can say const. Show is going to be set so you can give any name whatever you want. And it's going to be used as dead. And initially it is going to be false. Okay? And initially it is going to be false. So now the thing is that when user will click on this card, you can make it in many ways. For example, we're going to just click on the cart or we can add the icon here. Or you can do some other things. So I will do it in this way. So if it is false, then we don't want to show this body texts. If it is true, then only we want to show that body texts. So how can we do this one? So we can do it in this way. We can simply say, okay, so we can simply say, just for example, if this show is true, if this show is true, then only we will show our body tech. Only we will show our body information. Okay, I'm going to format this one. So we can pass this end operation as well as we can pass our ternary operator also. Now, we don't have these details information here because the statement is false and we are. So we said that if it is true, then only we can show this one. Let me change it true or false to true. Then we should be able to see this one. This is the body texts. So what do I mean by ternary operator tunnel? Your portrait is something like this. If it is true, then we want to show this one yields. We want to show nothing which is going to be a null, okay? It is going to show, and if I'm going to add it false. And then we can again see this one here. This is called the ternary operator. So basically you can use ternary operator when you have two condition. For example, if it is true you want to show something or you want to show something. In that case, you can use ternary operator. Otherwise, you can also use the end operator is going to be the same way. For example, if I want to say, it's false, if I wanted to show this Steadman here. So now we can see it's false is false is false because the first condition is not true because this one is false now, and if I say true, then it's going to show the body tag, the content, main content. Okay, this is how this ternary operator work. So for this one, I will only use, okay? I will only use this AND operator, but definitely you can do it using this way. But if you just want to show only one condition, then it's better to use this end of part two. Then you will not have to add this colon or null is going to work here, and then I'm going to add this to false. Okay, so now our plan was to add the icon over here. Okay, what icon we wanted to add. So go back here and then I can say stars here, arrow icon. You can see there are so many icons that we can choose from here. Arrow, okay, we can choose, we can choose this icon, I guess, or this icon, or I think we can choose this one. I use is this one and this one. So I'm going to select this one. And yet there might do, might have some other icon instead of flat color I console they had this colored icon. We may get some, okay, well, I would choose this one from here because it's the color icon, so we will not have to make any color this one they might have the bottom one also uses LED is on right. Where is the bottom one? I think they don't have the bottom one. They have the next, they have the previous. They have they have they expand, they have. This one. So these two I'm going to add. So before that I need to add this one. And I need to import this one here. And then inside these I need to add this option which is going to FC collapse. So FC collapse and you can see fc and fc is already there. So you just need to add this one. And if you use other, other icon, if it has different names, then you just need to chance it in there. And this one is going to be exponential. And this one is here. So just to react, I can forward the first two letters you need to write, for example, what I mean by that. So if I use, from here, I can, if you use this, then you can see this BS. So it's always the first two letter of any icon that you're going to use. A real icon for worthless because it's always going to work. So now I wanted to show it in this way. Our title and our icon should be in the right corner. Okay, So how can we achieve this one to this one, I'm going to create a div. And inside this div I want to put this title. And I'm going to create a class name. Here. I can say, I can say collapse icon, collapse icon. And here we will try to put our icon. So I'm going to add a tag here. And I just need to add this, this one fast because FC expand how we use. We just need to call this name and it has a property. Now we should be able to see the icon. You can see this icon is here, but it should be the right side corner. Don't worry, we will make it. And to do so, this is how we use React icon in our f and it has a property called size. We're going to also use this omega1 cell size 30. It's going to be bigger size. I think we don't need to have, thirdly, we need to have just 20. And then these columns are gone. These columns icon is going to be here. And I can say columns icon, I can say justify content, space between and display is going to be flux is gonna come in the right side corner. Goal. So now we have achieved this one. We can make it, we can do some other things. For example, just to be a content and can say align. Maybe align items center. Or I think we don't need to, it's already there. The card is not that big. We don't have this one because we're already using justify-content here. So cool. Now, what can we do? We can add a cursor pointer here. We can add cursor pointer. Then we have this, but currently it is not going to work, so we need to make it collapsible how we do it. Now come back here. And then here we can define a, we can create a function. We can say const, const, show item. You can give any name, whatever you want. Then here we can say set show is going to be not equal to show. Okay, so there are two ways to do it. For example, here we are saying that whatever it is, just do it opposite. But we need to do, we can create two other components because once it's open, we will chance it will change the icon color icon, and then once it's clubs, and then we will do it in this way. So let me show you what I mean by this. So fast. Copy this one and then add a onclick here. Onclick. Then here I want to pause this one. Can just pause this function here that we just created. And now we can see collapse. And if I click on this news going to hide, this is open. And if I click again, then it's going to hide. If it is open-ended and it is high, open, eyes open and then hide. Okay, so our call absorption is working. But now what I want, I want to have when it is open, I want to change the icon. And then when they will click on it, then only we can you can hide it, not the same icon. Okay? So for this, what can I say instead of this way, I can simply say when either click on it where you want to make it true. Okay? And now it is true, but this call absorption is not working here. And now we can make it dynamic this icon also. If it is true, if it is true, if it is okay, We can also make it in some other ways. For example, are not show and then we can just change the color icon color, then it is going to also work. So instead of writing two line, so let me try if it is going to work this way. So we can just opposite this one, whatever we have, we want to do it. And then here we can change the icon. We can say, if show is true, if shore is true, then we want to show this collapse option. That means we want to have in this one. Okay, so then size is going to be 20. If it is true, that means that our, our state is open. It means that the determinant is true. Then we want to show this collapse icon. If it is not true, then we want to show this one here. If it is true, then we want to show this one. And if it is not true, then we want to show okay, so I added it in the wrong place. It should be outside of this one. And here we go. Okay, so what do we say that if our estate is true, we want to show this collapse icon. Otherwise we want to show this expand icon. Let's see, our estate is false now. So our steady false, thus the zone that we are showing, instead, this expand icon, if I click, then our estate is true, and then we're squaring this icon. Then if I click on it and then it's going to down. If I click on it, is going to come down. This way. It is also went to work for you. No problem at all. We can see, we can do it this way, and we can also do this way. Another thing is that, for example, if you want to make this one clickable in the whole card, for example, currently if I'm going to click on it, it is not going to work. So you want, when you click on this card, you want to collapse this option instead of just this icon, then what can we do? We don't need to do much more thing. Just simply cut this onclick and add this onclick on the main cart, which is our discard. And then if I click on it, then it's going to work same way. Even the icon is going to change. So this is how you can add this color absorption. And another thing that we can do here, we can add a little bit of customization, design and the markdowns system. So I will show you in the next lecture. Bye bye. 8. Highlight Collapse Card: Welcome back once again. In this part, I will show you how can we highlight our card that is open, okay, and how can we change our last name dynamically? Okay, So one thing that is noticeable here, so this is the class name that is giving us this design. So if I look here, card design, it has margin padding. Okay, so first thing first, let me add one property here. So card design dot hover. So when we hover, I want to show this here. So I want to highlight this thing. I can say border. The border left is going to be maybe three-pixel. Solely. You can sit tomato color. You can choose any color, whatever you want. So you can see when I highlight this one, when I hover over, this one, is going to distinct. But, but when it is open, then it is still done. Is still done. It should be this color, it should have this marked color. How can we do it? We will do it. But for them, let me increase the border size. So, alright, so the border size, size is now five pixel and it looks really great. But I want to achieve this one when it, when our state is open, when this card is open, this one should be marked this way. Ok, How can you do it? So we can do want this thing in this way. So we need to make this one dynamic. How, what do I mean by dynamic? We can add the same ternary operator. So same condition in our class. If our JT is true, we want to mark it, mark this one. Otherwise we want to show this one. Okay, So how can I achieve this ones? I'm going to call this one. And I'm going to add this curly brace. Inside these curly brace, I can say show, show. If it is true, then I want to show this class name is I want to show some other class name. So now thinking logically here. So currently our steady state is false. So let me show this one here. Okay, so we have this one. So if I were instead is true, then our, we've got some changes here is because that it is falling this state condition. What do we say it here? Basically, if our estate is true, then only we are going to return this car and car design. If it is not true, it means which is false here, we are returning nothing. The other reason that our car has gone. So what can I say here? I can simply add the card over here. It means, if already said is false, then instinctual discard even suppose to establish what the card. Now we can see the card here, okay? But we're not getting the design because for that, we have to have a different design using the same thing. So I can say, so if it is true, that means this condition is going to be fulfilled. If it is false, then this condition is going to be fulfilled. So we still don't have this one here. Okay? So now I can mark this one fast. Solve this one. So if our estate is true, then this class is going to active. So for this class, this class is card design class. So I'm going to copy the same design because we need to mark this one here. Cool. So instead is open. There's a reason that this one is marked down. If I refresh it, it has gone because obviously it is not true. Let me click this one. Our STD is true, and then this one is here. And now I need to add one more class name. We can say card design false. If our current state is false, then we can show the same design now that we have here. So we can simply say card fees and false. We need margin padding. We need margin and padding. So I'm going to add this one here. Cool. Now, if I were instead is false, then we have the same design. I'm going to collapse this one. If R is dead is true, then we have this thing. If I were instead is true. This one is markdown, is true, this done. Now what I want to have e power instead is false. Then we want to show this hover effect that we were showing previously. Okay? So how can I do it? To do so? So with class is going to call this tail, is false in this class because if I were instead is true, this class is going to call it instead is false, then this one. So cartilages and false. Here. We need to add this one. Card is in false color on hover. And then I'm gonna say this one. So now we have this hover effect. If I click on it, then he's going to here. And now we don't need to have this card design hover. Because if I said man is true, then we're going to do hover over. If what is true is false, then only we want to perform this hover effect called Everything is fine. Now we are able to mark down our card. And this is how it's going to look like this. Perfect. Perfect, perfect. So we have successfully salt is call off seizures. And in the next part, and I will show you how can we add our pagination, because we don't want to show all these a 100 posed in this, in this single base. Okay, so I want to have pagination here. And then when user will click on the pagination, then we will show maybe 510 or whatever amount we want. So I will see you in the next lecture. Bye bye. 9. Slice Data for Pagination: Welcome back once again. In this part, we will start working on our pagination. So let me show you how can we achieve our pagination. So over here, this is the pace where we have our data that we're getting from our API. This information please contain some, let me first slice our data than we can connect our data with our pagination functionalities. So for that, I'm going to add a command here. You can say pagination. Just to understand that this is Ted and all this code is about pagination. So what I can say that I'm going to add a state here. I'm gonna say a state. And before that, we can say const. Const is going to be parked base. So part B is how many poets who do you want to show? So currently we have, currently we have 100 base in just the one part. We don't want to show a 100 force to here. We want to show maybe five or seven or eight or ten, whatever you want. You can change it anytime. So we can say bar base. Base is going to be for now there's the eight posts we want to show part pace. And then we need to define a state. Or you can say const, const is going to be our current pace. So we have, let's write fast current pace. And we can say set current goal. And now here we can say uses debt. So current phase is going to be one. It means that maybe in our, after dividing all of our data, maybe we'll get a 100 or 50 or 20 or ten pays based on the data we have and based on the data part pace we are showing. So whenever we will refresh our page, we will start our data from the base, from the base one. Okay, this is what it means. So I will I will be able to show you the more example once our business and Becky's is ready. So currently just understand that we are showing our data from the PS1. Okay, so current pace, set current pace. And now here we need to pass a callback function. I can say const, handled plague. We can say this. Plague is going to be this. And here we can pass a probes. You can say selected. It's going to be selected base. You can add any class name here. It just prompts that we are passing here. And then our arrow function. And here, what about data? User will click whatever data user will click here. Okay, so we did a mistake here. It should be inside this curly brace and then need to add one more, one more normal, normal bracket. And then, so what does it mean? So when a user will click on paste clique, then we want to select the item that they clicked. Then we want to, we want to set it in our set current pace. So we're set current pace is going to be our disproves. Cool. So maybe we have five pays, ten pacing based on the number of data and number of the item we are showing purpose. We are saying that click on the Paste number, click on the Paste number and then we're passing this one here. And whatever we will get by clicking this one, we're going to show you, we're going to set it in our current pace. Now we can create. So let me show you. And here you will also be able to see this kind of instruction. You can see current items. You just stayed base count. Item offset uses state than enough said item plus offset. And then handling, handled basically item purpose. So you can also have a look on it and then you can just tweet. But I love to do it in this way. Then I can simply create another, another process you can say offset is going to be equal to our current pace. Then this purpose. Okay, so whatever we have in our current pace, maybe we are in page number five and then we want to multiply it with our purpose. So case number three, then we want to multiply this with it. It is going to be 24. Then we can just divide this one. And now here we can get our current pays data. Okay, so currently our data is in these data uses states. Now we want to slice this data so we can say const current data. Going to be our data without slides and the sludge is coming from JavaScript. So what basically it do for us in basically slice our data from a large set of data, large set of array. It just going to slice in based on our condition. For now, is going to slice up our base a data. And here we need to, we need to add our offset, which is this. And then, and then we need to add our offset plus br plus br plus offset, then offset plus purpose. Cool. So what we have written here, so I said that just a variable current pairs data and I'm going to slice this one. So data, which is going to be our dataset that contains all of our API data. We're going to slice it using this one. We're going to pass this fast offset, which is the number of pairs and current pace. And then our offset plus bar paste it in this way we will get our data. And now maybe we'll get some double or float data. But we don't want to have this one in this way to count our pace. So there's a reason that we need to we need to around hour is okay. How can we do it? So we can simply say const, count is going to be met, not mapped, it should be met. So many dots sale made the dorsal this property is coming from JavaScript and metadata sale. And we can say data dot data dot, dot the land and did a lot land divided by our Barclays. So this way we will not get any floating data. Let's say we have 2525 post in our API and we divide it by eight, then eight. So 25 by eight, it will give us some point number because a 25 by 83 into three into eight, it will be 24. Melissa, we will have one that we will not be able to get in. Let me show you what I mean by this. I can say calculator. And so let's say we have 25 post in your API divided by eight. Then we will get 3.125. And this function will help us to prevent this point. It will show us three because this math dot sale always round our data. Now we have this one. Let me show is still, there isn't any changes because we didn't connect our data. So now, if you look at here, this current pace data is going to hold our data part pays eight data because our main instead is going to slice into eight For part paste. Now, instead of directly map through this data, we will have to move through this current paste data so that we can get only ate item purpose, goal. Now we have eight items here. If I'm not wrong, 123456788 item here, okay? And all other functionalities that are going to work perfectly, no problem at all. And another thing is that, let me show you that. Let's chance, Let's say we want to show only two items. Then he's going to show two items. Let me add five items. Then it's going to add five items here. Okay, Let me add again eight items. Then it's going to add eight items. Okay, so we are able to slice our data, but still we don't have our pagination. How can we get other data? So to solve this problem, we will have to add our pagination in the bottom after this one. And then we will have to add are these packets, which is React paginate. And then you pass the overreact as you need. And then we will show our data. So I will show you in the next lecture. Bye bye. 10. Add React Pagination: Welcome back once again. In this part, we will add our pagination. So what basically I do, I always try to separate the pagination file and then pass props so that you can reuse your pagination for other components, which is the best way for that. I'm going to create a new component, new file here in folder here. First thing I'm going to say pagination. I'm going to sit there. And this pagination inside this presentation, I'm going to add pagination dot js. This pagination dot js file is going to contain our whole pagination. And now I'm going to say, Okay, this is our pagination and we must have a CSS file for this pagination dot CSS. So our data and all the information is here. In this part. We need to somehow connect these pagination in here. So for that I can create a different D here. I'm going to say div. And this div will contain our pagination. I'm going to select class. Name is going to be a card. This div is going to be a card. And you can say pagination for this part. Okay, and then, then what we will have to do, we will have to pass our props. So let me show you. So now currently we can see this div and we don't need to have, okay, so let me call this one here again. So this information is going to be in the inflammation paste, this pagination. So we can say pagination, I can simply say marching, then pixel, and then fading as well. I think as pixel. Cool. So now we should be able to see this thing can do. We don't have any data obviously, but definitely we will have it soon. Okay, so in the pagination file, so we need to pass, we need to add our React pagination. And how can you do it? To do so, we need to call our React pagination here. So I'm going to add a div here. And just normally, and then we can just read the documentation and the document is shown. We can see that it passes. It passes two parameters, two or three parameters. They have couple of options here, and then some other things here. So we can simply call this one here origination. So we need to have this one and don't worry, we're going to make a lot of changes here. And just for example, I'm going to talk this one from this part, from this website. And now we need to, because we don't have any information here, we need these two information. One is ordered pairs count, one is our current pace data. Okay? So these are the two inflammation that we will have to pass. So we can simply say, Oh, we will have to say here Handel. And also we have, how are these, this function and this one. These are the two things that we will have to pass through the parameter. So I'm going to say best count. I'm going to add this one here. Count and the another one is that, which is handled. Please click and we need to, I am writing the same name. So here on paste on Pais, chance we need to pass our handle is click, which is this one. So if you have different names, just put it and paste count is going to be our. And these pairs count is going to count our how many pages we want to show here. Okay, so now we have this one. Now, this component contain these two pedometers. This to data item that we can pass from here. Who is we all are already have here. So let me import this thing fast. I can say import resignation from pagination to these pagination. And now I'm going to call this pagination inside our cartilaginous shown that we have created for this one. And it's going to pass two parameters. One is this base count, and then it's going to be this first count. And then here we need to add. Here we need to, we need to add these handlebars. Click. Cool. So our data that we have written for our pagination best count and handled physically is now inside this pagination. Let me try. What can we see here? We've got an e-reader, which is rehabilitation is not defined. It means that we need to import our React pagination that we didn't. So to import this deoxygenation, we need to import this rate pagination here. And then this is all pagination important, this one. And hope it or has gone goal. We have caught something here, but obviously it looks really bad now. So now if I click on the one, it should change our data, right? Okay, it is working. If I click on paste two, then we can see our data is changing. Our data is changing. It is really nice. It means that our pagination is working perfectly. And then this one is also working. This one is also working. Then we can show this one here and this paste in this split five. Okay, We will, you'll play around with these upper world. But before that, let me show you, let me make the design perfect look. So how can we add this design here? First of all, we need to have a break level. Then we need to have a break class name. If you read the property. Over here, they have so many things here. These are the props. So we will have to name it break class name here. So I'm going to add a class name. Class name is going to be our class. Then we can define a class. Then we can say Break Glass, Break Glass. And then we're going to have a next level, which is next. We don't need to have this one. We can simply add this one here. Okay, These are the two things that we got now. So now what can we add here? We can add there is another property and other property name is called pagination. So container cluster them is pagination. So container class name is pagination. So what does this continent class name means? There is a Polynesian container class in the cluster on the pagination container. So we can simply add this one here. And then we can say simply that name we can add, you can give any name of this class. We can simply say pagination. Container class name is going to be our pagination. And now let me add some design for this one. So this is going to be our pagination class. And in the pagination class, we need to add padding. We can add padding, ten pixels, and then we need to add, our display is going to reflect and then justify content. I want to have it centered. I would look what we achieved. So far. Goal. We can see our data is now being center. We can see your data is one by one. It means that we're in right track. Something is gonna happen with us very soon. And L and items, I'm going to add center and then I'm going to add, let's say add color. Color is going to be block. And then we need to add margin. I'm going to add tomorrow, sorry, need to add marching, then pixel. So now added margin ten pixel. Okay, So I think we need to play around with these. One more thing to need to add. This is how it's gonna look like. Text decoration. There are some other things that we can add here. Let me show you what else we can add in this part, because this data is in this in this one. So text decoration we need to add. Repetition is going to be none. And what is going to happen if I add here a, because I guess it contained the whole data. Cool. You can see now we are getting all this information here, okay, Because of this pagination class and by default content is a Always squeeze hold our all of these items, but we're not gonna do it in this way. I'm going to remove this a here. Then I'm going to copy this pagination one more time. And then I'm going to do it separately. This way. We will achieve our item in the center as well as we will achieve this thing. So I'm going to add text decoration. None. We don't need to have any pre-built text decoration here. And then we need to add list is tall type. Now, list style type is going to be none. Then let's see what we have achieved. And we need to add our margin ten pixel from there to there. Okay, so now we have this one. It looks really great. Our pagination is working. So we're not getting any least declaration or texting version, I guess I thought maybe we have this one that we basically get. Okay. So this thing we can use to and you move this underlined from the, from this or from this one because these are Previous and Next takes under these ally that we are not able to see it as a reason that we can also use this one. And we have this margin or padding. Okay, So it looks good now, we can still make some changes. We can highlight this one. Okay, So for example, if I am in this space number now, currently, we don't know if we space we are. Okay, so we need to make it highlighted. And I think I'll stop this video right here and we will continue with the next lecture. 11. React Pagination Design: Welcome back once again. In this part, we will try to active our pagination, alright, so that we can understand which part is active, okay? And how can we do it? To do so there is a property called pagination. And so that we can simply add this one and then we can simply add this part in our project. So the class name is active class name. And then we have some other part also. So let me show you how can we add this one. So this className, base class LinkedList and the cluster on a tape of easy-peasy lemon. So active class name, this is the name of the class that will help us to show our active class name. We can simply add active class name is going to be, we're going to say this link, this link active. And then I can simply add the design of this one. So how can we do it? We can just simply add border radius or other things in our F when it, when it is going to be active, and then it is not going to create any problem. So how can we do it? We need to add border radius first, and then we need to add some other things here. So border is going to be one pixel solid block. And then fading is going to be ten pixel. And then we're going to color is going to be plug. Let me see. So we can see now this design, it means this space one is active. This one is too active thrifty, but we can't see anything. And we need to add, I think, don't need to have heading ten pixel. I think five pixels is enough. Okay, so again, we need to call the a tag because this editor contain the main design. So I can say color is going to be white, not wheat, it should be white. Okay, so still we are not able to see our color. Let me see what I added a background color of black. Bears link, active. Physically, active color is going to be white. So it showed to work. And so no idea. We need to fix this one because initial link active. Okay, So we will have to add this one in this way. I think link active dot dot, active property that we need to use. And then only we should be able to see our data. And then link it occur. Let me change the name. Remove this limb, are active so that you don't get confused because we have a property called equity if in our CSS. So we just need to use this one here, and then we can add this one. So now it should work, I guess. Cool. Now it's gonna look like this. We haven't These 234. And this is still the background color is not showing here, so we need to add our active link, link, active pagination link, active is going to be water background color is going to be black. And then we need to add our this action to link active color is going to be white. And here we go. So in this active class name, we need to add some other properties because it has some pre-built property that I just caught. And then the class name on the deck. You can see active link className. There is another class called active class name. So we need to make this one this way. We can just say another line link. And this active class is inside this one is pre-built here. So we can say active. So we can simply do this thing this way. Then we can just change this one to this parameter, to this one. And then we can also add this one here. And then we should be able to, then we should be able to see some changes here. We can see the background color, but the color, however, it's not working. So we can simply add a border radius here also. I can say border-radius 20 pixel. Okay, So we'll fix it in a, in a minute too big because there are some other properties that is connected with this one. That's the reason that this one is not coming. So what can we do here? When our pagination is active, then we should see our color from there. And then there is another property that we need to use here called base class name, which is going to be big initial design that we need to write here we can say our base class name, where is the component? So it's going to be paced class name that we need to use. Okay, so we can use these base class name. And then we can say there's class name. We can say pagination designed for this one. And this pagination design class is going to contain the main design. It means that without active. And we can simply add this one. And we can simply say display flex, display flex. And then this is delta is non. And margin five pixel. We can add margin five pixel, then fading seven pixel. And then I'll bring someone to say we need to define hard and white. Then we're going to round it. So high art to pixel. And then y is going to be 30 pixel. And what it's going to be 30 pixel color is going to be blocked. That is going to be blog. And then border-radius, we need to add 90 pixel. Border-radius is going to be 90 pixel. And then text-decoration, none. Text decoration is going to be none. Texting line is going to be centered. Text align is going to be center and then align items is going to be center. And what can we see? So we can see this one is rounded now. This one is rounded. Now. This one is also rounded now. But still there are few things that need to be done in this way. And now we can simply add this one. So one thing that I forgot to add here, the background color, I think. So. I know we need to add a background color here, and color should be white. If I add a background color block. Let's see what can we see goal. Now we have this basic design here. These are, this is going to be the main theme of this, okay, So it looks like this. We must make some changes. So we can add the margin seven pixel padding, seven pixel, border-radius nine pixel takes the land sector unjustified continuity to add, I guess justify content is going to be center. And then text-decoration is also none because it creates some lease type. Now we should be able to see our text in the center. Cool. Now it looks really great, but it's still okay. So our background is white and our highlight background is also block, sorry, background is black, so I'm going to change it to tomato color. It is not working now. We need to make this possible. We will fix this one, don't worry. So we have this pagination. Now, when you hover over these pagination, what we will basically do, I think we can fix this pagination active offshore using there is a call active link className. And this link className will give us our required thing. So active link className to take. Okay, so let me add this one here. And then the property is going to be this way. I can say active link text. Active link text. Okay, so we are able to do this thing till now, and we will have to fix this one is still few things. And I will show you in the next one. 12. Highlight Active Pagination and Design: Welcome back once again. In this part, we are going to add some major changes in our pagination. Okay? So we can do it in many ways. For example, there is a property called we can simply read the documentation and then there is a property called selected Bayes rule. Or what is the name of this one? There are some other properties. And we can say pace lien class name. So there is a property called Baseline class lambda clustering on takeoff ie space elements. So we're going to use this one to highlight our text that is active. So Paisley in class name is going to be selected pace, selected pays. And this electric bass is going to be the pace that we want to. That is our selected basically. So I can say selected face is going to be color, color is going to be maybe tomato color. Just for an example, we will solve it later. Now they're here. Okay, So cool. So this is how it's gonna look like. If our page is selected, then our, then our, if our base is selected, then we can see this is going to be white, which is our active base here. So paste link active is going to be white and other pests is going to be tomato color. So this is how you can make this thing done. We can make this design in these react. Or I think it's possible also to make it this way. For example, we can add a leaf. Got this one from here. And then if a posterior are posted here, then what will happen? So we will be able to see this thing is like this working so we don't need to have this one in this way. So we can simply give this thing here. And it's going to look like this. Okay, so another thing that we can do, we can make, we can say, so basically we can now remove this background and border radius from here. And then if it is selected and then only we can, we can, only we can our show this thing, I guess. So. Let me show you what I mean by this. Or if you want, you can just play around with this one. And then it is going to work this way. So this one is active and this one is active. And then we have this one here. Cool. So I basically mean that these pagination design is going to hold this whole thing. So if I just, okay, so instead of this is the pagination that we have here. This is a pagination. Okay, So let me point out this one here. And this is what I mean basically. So if you want, you can also do this thing here. If it is selected, then only we can simply highlight this one and for the other text, we can do it. So to make it round, we can simply do one thing. This is what we are getting so we can define our height. We can say our height is going to be 90 pixel and our y is going to be 90 pixel. And then whatever it is, it's going to be 90. Then it's going to be this way. We got this big, bigger size. I'm sorry, I'll hide in which would be tardy pixel on the 19th Excel. Okay, cool, cool, cool. So we have this one and then we need to make some element they can still justify content is going to be centered, I'm sorry. Just to be a quantity is going to be centered. And maybe we can just take this thing from here. Then I can just paste it here. Then it should be in the center, I guess. Or maybe we can also put it here to make it center on the right. Okay, so I think this thing is coming from this one. We can also try this one out. For some reason it is not coming in the center. My data is working in this way. Okay, So this is what I wanted to show you. Okay, So we got another border, which is going to be a black border. I think in this border is coming from this border is coming from this. So we can. Okay, let me undo all this team that we had previously. Then we can just add this one here. So now we have this options, I guess. No, we need to remove this one as well. So this, this height and this border radius from here. And then we get this thing. So we can see this thing, these things. And now if I press a border radius here, so border-radius 90 pixel, then it still will be able to see, mark this one. And the problem is that here. And if I, if you want to make this background designed by default, then you can simply also use this design. It is going to also work, okay? You can just simply highlight your text and highlight your data. Whatever data or whatever design you prefer, you can just do it. So this is going to work for you as well. So I just wanted to show you how can you add. I'm going to play around this one. Now it's still we have two things to fix. One is previous, anyone is the next button. So for that they also have a property called our previous class name and next class then it's going to be wanting to use this one. We can say previous link, lastname, and then previous level, previous class name, and previous button. There are two other properties which is going to be previous, previous button and previous link. We can use this previous class name instead of the link className. So we can say previous class name is going to be Previous button. Previous class name is going to be Previous button. And this previous button is going to be something related to this one. I'm going to come here for these two design in-between. You need to choose one, whatever you want. I mean that either you want to have this background color or the normal one, then you want to just select this one. So I just need you just need to play around with this pagination. I would love to keep it in this way because for when the link is active, then it just goes to show that the color and the normally is going to be in this one. Then this pagination design is going to be the previous button design. We need to add. So far as to add and display is going to be flex and then we need to add list-style-type none. This is teletype is going to be none. And then we need to add our margin, five pixel and then we need to add border. Model is going to be one pixel solid block. And then we need to add bedding so that it looks good. We're going impeding seven pixel and then the height, height is going to be, I'm Kartik pixel, I think 30 pixels. And then y is going to be 90 pixel, or it is going to be 90 pixel, color is going to be white. Color is going to be white. Color is going to be height. And we can add border-radius. So border-radius is going to be 20 pixel. And then text-decoration is going to be division is going to be none. We can see these things so far. Let me remove this one because it is taking more space. The reason that it fall on the town. Right? So we can just add some other classes here. Let me remove the height and let's see what can we see here? We can see this height. And I can also add the height is auto eyes is going to be auto fit content. And I think we don't need to have this bedding seven to sell maybe two pixel padding. Our height is going to be auto, and then I'm going to be c. Then we can see this. Okay, So we're in phase number four. If I click on the plus button, is working perfectly. Why can't we make height of this one? We can say height, 40 pixel, it should work, I guess. It should work. And then we can add some other properties. For example, this one. All these texts declaration list is teletype to make it pull it in center, called noise in the center. And then now we can decrease the size to 30 pixel. Cool, it is working. So this is our previous button. And then we will have to add our next button in the same design. And so this is the previous button. Now we can do the same thing with our next button design. So PVS close them, is going to be next class name. So we can simply add this next class name here. Next class name is going to be our next button, our next button. And in this next button, we need the same design. If you want, you can make changes. That's totally fine. Cool. We have this one here. Now, if I am in the fast pace, okay, then this button should be desirable. Goals should be gone, right? Because we, if I'm in the base number one, then we're not gonna do anything. We can't go beyond phase number one because this is the initial value. So we need to disable this one somehow. I am in the last piece and then I should be able to disable that text button also. How can we do so? How can we achieve this one? So to achieve this one, so there is a cluster name called inducible class length. I'm not sure exactly this one. I guess. We need to note the link one. I think we need to add the class name, class name. And I'm going to add this property in this pagination here. And then I'm going to add this thing. And I'm going to say Visible, Visible. Previous. Next button, depend on you, what class name you want to add. I guess. So let me try if it is going to work. And then we can say display none because we don't want or don't want to display this one. If we are in doubt. If you're in the fast pace than this previous button has gone. If I click Next or click on the second page, previous button is up here, click on the previous button. It has gone. If I click on the tartan, this next modernism corn, if I come one step before, then this is going to show here, and this is how it's gonna look like. So this way you can just play around with all of their class name that they have. So you can also do one thing. Maybe you have noticed in some our website, some platform, they disable the button unless it is. Unless it is, unless it is. So for example, if I am in this one, instead of hiding this one, I can simply disable this one. So how can I do it? So let me comment out this one. So I can simply say, gosh, so we can say cursor is going to be not allowed, actually, not a lot. And then we can say, this is the cursor. I can see this cursor is not a lot, or we can simply add this one. I think it counted this E. We, then only we can do it. You can see now this whole thing is this. So now we can click this one, but this one is not desirable. On the next button is working, working. And now if I'm in the second paste and this previous button is also in a bowl as this one. And then click on the third one. And then this one is going to be next button. And so for the next butter is going to be same. And we can also make the color, because the color is going to be in gray color so that it looks really is inducible. So if I am past faced, so you can see the color isn't just a bolt and then it's just a bolt. Okay, So you can simply play around with this one and then it's going to work with you. Man, I'm gonna stay. I'm gonna start with this display none. It looks more Good. Okay, So we need to we need to change the a because it take this a in this way. 13. Deploy React Project to Netlify: Welcome back. Once again. In this part, I will show you how can we deploy our project to server or any kind of hosting platform so that user can easily access your data. But before that, let me show you a few things. We need to add our loading hair here. Because if our data is not loaded, then we can show them some loading information. So how can we do it? So here, this is our base, and here I'm going to add a new state. I can say const, can say loading is going to be sad, lonely. And initially is going to be true. Because initially it is true as soon as we get our data, we want to set this loading false. So here we are getting our data. If we get our data, then we don't need to show any loading. We can say it's false. So how can we show this loading in our pace now? So for that, you can use different kind of icon or anything else. So just for an example. So after this you say fact I'm going to add a condition here. If our loading state is true, then we want to show them message that data is still loading. Then what can I say? We can say here. We can say def. And then, like I said, Tech Center. I'm going to add a class name and clustering is going to be text center. And I can say margin wide is going to be 25. And then inside this one, yeah, that you can add icon or you can just add a text. For example, I'm going to take a loading this. And if I click on this, you can see the loading text. You can see this loading tags. So this way you can also do this thing. So there might be some icon here for loading. You can also show this loading icon. There are many icon. Let me try. You can see this icon, this icon, this icon. You can try any icon is for example, let's say I want to show this one. Then I can edit here and where we used our data for this one. Okay, so I'm going to copy this one here, and then I'm going to paste it here. I'm going to add this one over here, and as it is in BI. So I'm going to change it to be, I know I can access this icon instead of this text or output this text. I can also show this icon. And then I can say the size. And I'm going to add decided is going to be 40. Now let me refresh this one. I can see this loading and with this icon. Cool. So now we need to deploy our app to server. You can try any server, but I'm going to show you how to deploy our app to Netlify. So just create an account using your GitHub account or your email address. They have so many options. So once you have your e-mail address, once you are registered here, you will be able to see this option. So you might not have any site if you're new here because previously I was deployed to one reason that I can see this thing. But if you're totally new, then you should not be able to see anything. So we just need to click on the side and then we can just drop our file here. But for that, first we need to add our data in this way. For example, let me show you. So this is our client size. And okay, so we need to build our project. How can we build our project? So we can simply add this one. So open your terminal and I'm going to, first I need to move to my folder client. So the client, now this client directory, so now I can say npm run build. This command is going to build our project. And then we can just deploy our Build folder to our Netlify, and then it is to deploy our site. So a folder should appear here and it takes a few moments. And if you look at here, this is our main folder directory. So this is the client. This client folder we have all of our file and our Build folder should appear here. And then we will just have to drag and drop or build folder here. Then it is going to do its job properly. It takes few times, so I think I can pause the video for a while until it's gonna have, or I can simply explain few more things to you. Okay, we can see our Build folder is creating a little tech few times. And this is our folder structure that we have created. I hope you really learned a lot from this course because these pagination is really important because you will have to do at pagination in your project. If you are dealing with a lot of data item, then this is very important. And these react pagination package gives you a lot of flexibility to add it without writing so many code. So you can look at here. We just use their pre-built class name and we just met our design according to our requirement. So nothing complex here. And here, we just need to write these few lines of code and then you can just use it. So the good thing is that as I told you that these pagination folder I have graded separately. So you can use the same code and assemblies and for any kind of data, just put the data or slice and then you can just reuse your component. Okay, So our build has finished. Now we can just copy this from Build folder and then you can just drop it here. So this Build folder don't need to go inside and just drag this from Build folder and then draw it here. And let's see what can we see if you get an error and then we will have to fix it. And it will take few moments. You can see production is uploading depending on the file size. Coal production published in just few seconds, we can see our app is steady. This is the link port application. Click on it. And here we go. Our first step is now live and server. Anyone, anyone can access this file and this is working, this is working and our pagination is also working. You can see perfect in just few seconds. So what basically we did here and okay, so now we can change our name, definitely look into it. So this is the name of our file. What I did, basically just a login. And then it stay here and here you will be, so you just need to go to this size. And here you will have an option so you can connect from your Connect, you'll get half, or you can just browse, or you can just drop the fun here, then you just can automatically deploy your project. Now, you might want to change the name of this project. Definitely you can do it. So how can you do it? If you want to add the domain name, you can also add a domain name in here, but I want to change the name. This is the name. And here we can see Chen site name. And here we go. We can say React origination. Cool. Now if I click on it, said name is already taken. So already someone has already taken. So we can take this one react pagination. We API in data goals. So this is our site name. Now, if I refresh this one, so it is not going to work because our name has been changed. So we can come to cite overview. I want you to go to our main directory and then we can see name has been changed, reactive origination. And if I click on the link, and then it is going to work again. We can see also our loading indicator. Cool. You have learned how to deploy your F to Netlify, how to create this collapse of Schoen, how to create these pagination and how these, how to add all these features here. So I hope you liked this course and I wish you all the best. And this is the last lecture of this course. Bye-bye.