we're gonna talk about the data fetching in the next J. S. So what is the data fetching actually? So first thing first you know you can put the data here like you know you can see that we can put anything we want to but right now we're talking about fetching the data from somewhere else. The possible possible target can be the database, some kind of A P. I. Or you know, things like that. You can also bring the external data here in the website after processing. Absolutely. But you can fish the data this way. So so you know this is this is a different concept that from where you want to get the data. This is another thing, but you want to get the data and you want to fetch the data right here in this page. So how you do it, you actually you know, first thing first if you're getting the data from the database then you have to create you know the data. You have to link your database and you have to get the data in the A. P. I. And then for example this can be the api and then absolutely. You get the data in the in the page in different page wherever you want to display it. The second way is you can you know you also can get the data from different places or some external websites and I'm going to use an external website for now which provides the api the most popular website to provide us the damage to the adjacent placeholder dot type the code dot com. So before doing that there is one more thing when you're retrieving data from, you know from the database or from some external source. You need to know there are two ways. The one way is get static props. The second way is get server side props. What's the difference between them both retrieves the data but the, you know the get static props actually, you know, brings the data for once when you, you know, you kind of load websites so for example the website is loaded and you just, you know, you just uh you just put the command to retrieve the data using the get static crops. Then absolutely. When something updates and you want to change the data, you put some command or maybe some user input to change the data. There won't be a change in that case if you want, you know, kind of real time data and maybe you want to retrieve the data on the basis of the user's input. Maybe user wants some different title, maybe user wants some different article or some different product. The user is allowed to give its input. In that case you go with the get service side prop otherwise both works fine. I'm just gonna go with the get steady crops right now and I'm going to create um another, you know, another function here and I'm gonna go with the first of all I'm gonna explore. Let's just go with the const and space gets stated crops Okay. And then Sorry, um get speedy crops I think equal to I think it's a it's in a think function I think Ronan's function anyway. And then okay now I can go inside and I can do things. The first thing is const and another variable. Actually it's not a variable, it's a constant variable by the way. Now it's a response. I'm not sending in a request. Okay. If it is the, you know, it's a server side uh props I might be sending their request but for now I'm just going with you response anyway so response equal to evade anyway. Even if it's the server side it's still, I'm just gonna send the response here to sending the request. There are different strategies anyway. So we will talk about it once we, you know, once we talk about the api anyway so uh the evade and then the fetch and like that. And then I'm going, you know the simple fetch command in the javascript. The simple method to fetch anything. An alternative of the agents by the way. So https and Jason placeholder dot thai PICO dot com. Flash. Yeah clashes. Not very necessary any anyway. Okay, this spelling is correct. Jason placeholder dot coms dot type the code dot com. And then another constant variable. Const and now I'm going to get the data, I'm writing data here and equal to and I'm writing of aid people to rest dot Jason. So I'm getting the data actually this is the this is the data you're getting, this is a simple, you know, fetch command. I mean there is nothing complex anyway, so just got the the the the data using the fetch command in the rest of the response variable and then I just you know use the Jason method here and I got it the data, the Jason data in the in the in the data variable. Okay. The next thing I need to do is absolutely I need to I have to export it otherwise it won't work. So I'm gonna export it export and then I want to use this data into the, into the this main module but before that I need one more thing and that thing is I am going to, you know what this function is returning for now the function is returning nothing because we're just exporting it without returning anything. So I'm just going there and I'm writing return because it has to return something now it's returning crops. Okay. That's how we just, you know that uh Okay so actually this is the way you know to you know get the props in the next day is so anyway this is the data and we are just returning the data into the form of props so now absolutely I can use it here. Okay um I'm just exporting it the data and it's the time to use it here. So I'm just going there and I'm writing data um in the curly braces. Okay, now I'm actually, I'm actually getting here, I've exported the function and the function, the function is returning the props which is data and I'm getting this data, this data actually into the main component, the main module and now I am able to use this one and I'm going there above the return, I mean I'm not returning anything or actually the GsX for now, I'm just going to be controlled our log log and then inside it, I'm just going to write that up and I'm going to go to the browser and I'm gonna see what I'm going to get. So here is the browser and I'm just gonna refresh it and actually I do not need to refresh, I need to go to the there is something is which is not right, Jason placeholder, This padding is correct. Type E code is also correct, invalid response. Something is not right here. So I'm going there back and I think I need to see what is exactly going wrong. Kant stressed. Okay, https the addresses, addresses right code. Okay. No, that is fine. Oh, Oh actually actually I I need to write the posts because I'm gonna, you know there are multiple kind of data and I just want to get the data the posts actually, so now it should be fine and I'm just gonna refresh the page and then I got it and I'm going to the inspect element and after going there, I should go to the console and I got it the the array, it retrieved an array from this api and I'm gonna go there back and I'm gonna open it and you can see that this is the data, we've got it, you know, the body, the title and everything actually it can be anything. I mean, this is something you decide and you design in the A P. I. So this is something like that and we are getting it okay. And the second important thing we need to do is now we can, you know, we can use this data which we just retrieved Into the, into our our, you know, the J six. So what we need to do to get the data into the jsx, we need to simply write a simple command. Actually we're gonna uh, you know, we're gonna, this is an array, ultimately you can see that this is an array, so we're just gonna get the array and to get the array in the GsX. Now you can use simple mapping, you know, just like, you know, for each there is another method of javascript which is mapping. So I'm gonna do that, I'm gonna go there and I'm gonna write the dev and I'm gonna close this. Okay. And inside this step, I'm just simply going to create the data. Dot map this data is absolutely this one and in the mapping, I'm gonna put the function. Okay, the function I'm going to write is function And then that uh come on I. D. Okay I d. I'm gonna it's okay with the idea by the way. Anyways and then I am is still inside it and I'm going to open this one actually here. Okay, um something is wrong in this command by the way. This shouldn't be this way. Mm hmm. Here. Oh okay. I I forgot this is not good. Actually. This is another function. I was confusing. This curly brace uh for the for the curly brace of dysfunction. Anyway, here I am going to return something and it can be anything. I mean it can be it can be like I can let me just go with the simple ally and this should be um by the way when I'm going with the Ally. So you will and that's fine. Now inside it I need to write I've got two things that in the in the mapping. I got two things the data and the I. D. The I. D. Is ultimately the I. D. Will be created by the map. I think I should write ideas because the I. D. Is also the part of the, you know the data you're receiving here. So this should be better to use a different name. Okay now inside it I just need to go there and I need to create the curly braces like that. And inside it, I'm going to write the data dot title Okay. I also need to create the key for the mapping. I mean this is the obvious thing so the key and equal to and for the key, I'm going to go back and I'm gonna write i e d s and I'm gonna save it, I'm going to go to the browser and you're gonna you're gonna get that all the titles are here. Now. Actually you can create the whole blog by using this api So I think the logic is damn clear. That is how you just retrieve the data and this is how you you fetch the data now. Actually the thing is when you got the data here, you know, before exporting or returning. I mean actually this is exporting because we're exporting it using this function so within this function or here before the return you can do whatever you want to do with this data, you can filter some results, you can you know, you can put some array some array functions, some string functions or whatever you want to do and then you can utilize the data, you can eliminate some arrays, some some roz some properties or whatever you want to do with this with this data you just got from from this data fetching. So I think things are clear if you want to, you know, you want, you know, for now we just got this data but maybe you just created a function here and you want the user to choose how much they how much data they want. Or maybe user want to u user want some specific data. Maybe you just want this line. The user would you should have the ability to select research in that way because you want the user input. So in that way you would use the get user get service side props instead of to get stated crops. So I think things are clear now. We'll meet in the next cast till then stay tuned.