1 00:00:00,530 --> 00:00:03,800 So now they'll be setting up our API so that we can get our data. 2 00:00:04,040 --> 00:00:08,390 So for that purpose and inside our components folder will be creating another component, and this time 3 00:00:08,390 --> 00:00:10,790 we'll be calling it APIs Dodgers. 4 00:00:13,760 --> 00:00:21,500 And hit enter now, as you might recall, we have already installed Axios inside avocados. 5 00:00:21,770 --> 00:00:24,480 Jason, we have installed Axios as well as notice. 6 00:00:25,190 --> 00:00:26,980 So now it's time to use that Axios folder. 7 00:00:28,520 --> 00:00:30,170 So let's just import at Axios. 8 00:00:38,050 --> 00:00:44,170 Now inside this excuse will be creating a component, and it's just great a function export default. 9 00:00:46,880 --> 00:00:57,290 Axios Dot read, this is basically an Axios instance and said this will be having an object which is 10 00:00:57,290 --> 00:01:02,670 going to have a base you order, which is going to be equal to the API APIs. 11 00:01:02,690 --> 00:01:04,040 You also just baseless this. 12 00:01:04,070 --> 00:01:11,900 You are inside this and that is at GDPs making bad API conduct slash apps slash, which has been provided 13 00:01:11,900 --> 00:01:13,640 to you and Winston done. 14 00:01:14,600 --> 00:01:17,660 But I semicolon and hit save now. 15 00:01:17,660 --> 00:01:20,910 Head back to your ad dodges now inside dodges. 16 00:01:20,930 --> 00:01:26,480 What they're going to do is that will be creating another hook or calling into the hook from a React 17 00:01:26,480 --> 00:01:28,790 module, and that is yours if I took. 18 00:01:30,090 --> 00:01:31,410 And right beneath the. 19 00:01:32,500 --> 00:01:35,170 States will be initializing are you as a factor? 20 00:01:35,980 --> 00:01:38,710 So this huge effect took is going to have another function. 21 00:01:39,250 --> 00:01:44,710 So let's make an error function and instead this year the fact, OK, let's create a constant with the 22 00:01:44,710 --> 00:01:45,370 name reserved. 23 00:01:48,620 --> 00:01:57,110 And once you make, this will be going to political to expose novelty importance to us and really we're 24 00:01:57,110 --> 00:02:01,430 putting up get statement and some embracing that excuse. 25 00:02:02,360 --> 00:02:06,350 So now we have imported Axios, now we are going to give it the queries that we want. 26 00:02:06,800 --> 00:02:11,720 So inside the Axios get, we'll be putting up backpacks. 27 00:02:15,750 --> 00:02:19,650 Now inside this tactic, we are going to give it a slash and characters. 28 00:02:23,080 --> 00:02:29,080 Characters and after characters, we are going to put up a question mark and the name of the character 29 00:02:29,080 --> 00:02:34,480 that we want to search for and the name is going to be equal to dollar equity. 30 00:02:35,470 --> 00:02:40,570 So this name is going to be called to dollar and the query that we have received through our search 31 00:02:40,570 --> 00:02:40,840 bar. 32 00:02:44,610 --> 00:02:46,800 So basically, this is a sin tax that we're following. 33 00:02:47,550 --> 00:02:48,790 No hit save. 34 00:02:49,620 --> 00:02:55,050 So now as you know that this function, the use effect function is. 35 00:02:56,280 --> 00:02:57,970 Going to need the await keyword. 36 00:02:58,360 --> 00:03:05,260 Therefore, we will make sure that the constant result is inside a function that is and is a function. 37 00:03:05,530 --> 00:03:09,370 So let's just create an easy async function, so let's create a constant. 38 00:03:09,730 --> 00:03:14,020 And name this function, for example, fetch items. 39 00:03:16,090 --> 00:03:18,280 And then again, this function is going to be in. 40 00:03:20,380 --> 00:03:28,320 Async function so that we can use the await keyword inside it and inside this let's just move work constant 41 00:03:28,340 --> 00:03:33,880 inside this block and in front of our excuse, we're going to put up the await keyword. 42 00:03:36,880 --> 00:03:39,250 OK, so we have configured our results now. 43 00:03:39,280 --> 00:03:47,890 This results need to go into item, so after this will be setting are items that items, so we will 44 00:03:47,890 --> 00:03:49,510 be using the setup function to set items. 45 00:03:50,410 --> 00:03:51,490 So set items. 46 00:03:53,660 --> 00:03:56,300 Which should be equal to results. 47 00:03:59,500 --> 00:04:00,460 Stored data. 48 00:04:01,970 --> 00:04:08,120 So after this, we will be setting out loading loading, which initially is false, therefore we will 49 00:04:08,120 --> 00:04:08,930 just make it true. 50 00:04:09,380 --> 00:04:10,700 Initially, we want it to be true. 51 00:04:10,700 --> 00:04:14,780 And when this completes, we want the loading to be turned to files. 52 00:04:15,350 --> 00:04:20,150 Now the question arises, when do we want this huge effect to render? 53 00:04:20,420 --> 00:04:24,480 So we wanted rendering every time there's a change in our query. 54 00:04:24,500 --> 00:04:32,060 That means every time you use a searching combat tractor use, if a hook should render, therefore will 55 00:04:32,070 --> 00:04:39,890 be after just off the server inside the squared basis, we will be putting up clearly. 56 00:04:39,890 --> 00:04:46,490 We wanted it to be rendered every time we get equity hit save. 57 00:04:48,050 --> 00:04:51,140 OK, so now we have call function. 58 00:04:51,500 --> 00:04:55,640 Now it's time to call it so right of the fetch. 59 00:04:55,640 --> 00:04:57,590 Items will be calling out for each item function. 60 00:04:59,720 --> 00:05:02,030 So let's go fetch items. 61 00:05:03,680 --> 00:05:06,980 So this is the function body, right, and we need to call this function. 62 00:05:07,370 --> 00:05:08,690 Therefore, we are calling it inside. 63 00:05:08,690 --> 00:05:12,290 I use if I took as well as we have the body of the function inside out you as a backdrop. 64 00:05:13,100 --> 00:05:15,020 So now let's just hit save. 65 00:05:16,580 --> 00:05:21,800 OK, so we have set about items as well as loading. 66 00:05:21,800 --> 00:05:27,260 Now, the only pieces of state that remains inside this particular block is to pass that data into a 67 00:05:27,260 --> 00:05:27,880 catalyst. 68 00:05:27,890 --> 00:05:29,390 So that's what we'll be doing next.