1 00:00:00,810 --> 00:00:05,430 So in the previous video, we saw that a component was not being rendered on the browser. 2 00:00:05,910 --> 00:00:08,100 So did you figure out what was the reason for that? 3 00:00:08,550 --> 00:00:10,440 If not, let me just tell you what is the reason? 4 00:00:11,150 --> 00:00:15,120 So the reason is we have not imported our component in aggregate. 5 00:00:15,150 --> 00:00:16,790 This file, as you already know. 6 00:00:16,800 --> 00:00:23,010 And if you don't know, let me just tell you that any component which you want to display on the screen, 7 00:00:23,010 --> 00:00:30,510 which you want to, which you want it to go to and rendered so that you need to import and and you need 8 00:00:30,510 --> 00:00:32,700 to include it in the abductees file. 9 00:00:33,000 --> 00:00:38,730 If not, it will all be rendered and you will not be able to sort of see the images which you make or 10 00:00:38,730 --> 00:00:43,890 you need to, you know, you don't need to like see what is there in the component, so you need to 11 00:00:43,890 --> 00:00:44,400 import it. 12 00:00:44,790 --> 00:00:46,350 Let me just go ahead and import it. 13 00:00:46,800 --> 00:00:51,050 So this is how you write import like any name you can provide here. 14 00:00:51,060 --> 00:00:53,970 So I provide certain. 15 00:00:55,980 --> 00:00:58,360 I mean, OK, it's already doing their part for me. 16 00:00:58,840 --> 00:01:00,220 It's a good that's a good way. 17 00:01:01,270 --> 00:01:01,770 All right. 18 00:01:01,780 --> 00:01:08,500 Let me just provide caps lock for the first automatic surge mean from component source men sometimes 19 00:01:08,500 --> 00:01:11,350 are just auto imports when you buy piping only. 20 00:01:11,620 --> 00:01:16,150 And if you include all sorts of, sometimes it just gives you an option for importing. 21 00:01:16,660 --> 00:01:20,820 Let me just include this here to to me. 22 00:01:21,640 --> 00:01:26,830 And let me just save and let me go to the. 23 00:01:29,030 --> 00:01:39,100 But I was a yes, you can see that is up in Brookfield, which is typesetting new and headed the city. 24 00:01:39,470 --> 00:01:44,240 So we have successfully rendered whatever code we type. 25 00:01:44,780 --> 00:01:49,520 So let me just go back to the browser, and right now it's clean. 26 00:01:50,240 --> 00:01:53,270 It's looking a little bit basic without any styling. 27 00:01:54,020 --> 00:02:01,640 So let's go ahead and import this useless file, which we created because without CSIS, it's is just 28 00:02:01,640 --> 00:02:02,360 the skeleton. 29 00:02:03,080 --> 00:02:09,410 Like, there's a saying like it's doing with just a skeleton, and they're designing all the things 30 00:02:09,410 --> 00:02:12,980 which are visible to us, which we see. 31 00:02:13,580 --> 00:02:15,020 So that is the CSIS. 32 00:02:15,020 --> 00:02:18,320 So you need to like, provide the CSIS. 33 00:02:19,300 --> 00:02:25,940 So let me just go ahead and import the scissors file in the search component. 34 00:02:27,130 --> 00:02:30,430 Let me important and it will be important. 35 00:02:31,560 --> 00:02:37,890 From and now I will provide the source to the my just fine for. 36 00:02:39,740 --> 00:02:40,400 Maybe this. 37 00:02:41,690 --> 00:02:45,980 No, I am doing some mistake, and that is the spelling, correct? 38 00:02:46,640 --> 00:02:52,070 No, we'll just provide I think we'll just provide this, which is the source of the. 39 00:02:54,160 --> 00:03:01,870 Is the source of the cold to fine when it is located, actually this address, OK, so components and 40 00:03:01,870 --> 00:03:03,340 then you need to provide. 41 00:03:04,660 --> 00:03:06,550 Styles. 42 00:03:07,860 --> 00:03:09,590 Hostile darts us. 43 00:03:14,160 --> 00:03:16,590 OK, now if I go back to the browser. 44 00:03:18,030 --> 00:03:26,220 And if I just refresh and see, OK, we are seeing Acquia able to see like little styling is being done, 45 00:03:26,220 --> 00:03:30,210 although not all of the styling is done, but some kind of styling is there. 46 00:03:30,780 --> 00:03:33,750 So we can we can go ahead and tackle it. 47 00:03:33,750 --> 00:03:35,670 Like why it's not looking like that. 48 00:03:36,180 --> 00:03:39,240 Let's go back to the VA escort. 49 00:03:40,910 --> 00:03:42,200 And now I'm here. 50 00:03:42,230 --> 00:03:51,060 And let me just provide help search in place of Sadr City because you don't need to write big, big 51 00:03:51,070 --> 00:03:56,720 text and the button buttons are like as beautiful as their small in the battle. 52 00:03:56,720 --> 00:04:02,930 There will be surge and here I will write down city name or you can just write 30 30. 53 00:04:04,890 --> 00:04:07,450 Circuit City and then good arts. 54 00:04:07,540 --> 00:04:12,990 OK, if I see it and now if I go back to the browser. 55 00:04:16,080 --> 00:04:17,640 It looks a little bit cleaner. 56 00:04:18,420 --> 00:04:20,310 It looks a little bit cleaner. 57 00:04:20,340 --> 00:04:30,420 OK, so now if I go back to the escort and let's do other things, you know, what we want to do is 58 00:04:30,420 --> 00:04:39,930 that we have to capture the text, which is being, let me show you, we have to capture the text, 59 00:04:39,930 --> 00:04:42,000 which is being typed here right now. 60 00:04:42,270 --> 00:04:48,840 OK, so what I want to retype here, so that needs to be captured in a variable. 61 00:04:49,320 --> 00:04:55,260 And that variable needs to be parsed in the in the you are looking at the API, which we saw. 62 00:04:55,860 --> 00:04:58,100 So that's very important. 63 00:04:58,110 --> 00:05:06,030 So for that, what we need to do is we need to create a variable which will store this variable, which 64 00:05:06,030 --> 00:05:09,150 will store the value, which or key which we type here. 65 00:05:09,510 --> 00:05:17,130 So for that, I need to like see what is being typed and we need to store it into parser. 66 00:05:17,430 --> 00:05:19,770 So all that work will be done now. 67 00:05:21,070 --> 00:05:26,430 So can we just import it was a fact and use state? 68 00:05:27,130 --> 00:05:34,300 Right now, we just need you state and the U.S state is what I will explain, you know, and later on, 69 00:05:34,300 --> 00:05:36,970 I'll explain you use effect, which is what is the use effect? 70 00:05:37,630 --> 00:05:40,720 So let's just create a. 71 00:05:42,550 --> 00:05:50,600 So here you will, right the variable, which needs to be a lake which is responsible for storing the 72 00:05:51,040 --> 00:05:58,690 fuel and bossing it, so we'll put it in your state variable, so it is something like that. 73 00:05:59,680 --> 00:06:05,060 First, we need to define it like Konst and then an audit, and inside this, there will be a variable. 74 00:06:05,500 --> 00:06:08,230 And the next will be the function, which is responsible for changing that. 75 00:06:08,230 --> 00:06:11,110 Very but so we will write it like. 76 00:06:11,890 --> 00:06:12,820 So it's done. 77 00:06:15,480 --> 00:06:18,660 First home and then next to the function that. 78 00:06:20,840 --> 00:06:21,370 Third. 79 00:06:23,370 --> 00:06:27,360 So this will be the function, and next to that will be. 80 00:06:29,470 --> 00:06:30,250 Default value. 81 00:06:30,400 --> 00:06:37,240 So this is how you will provide default value, and now here, for example, I am providing default 82 00:06:37,240 --> 00:06:39,780 value of Mumbai, so that doesn't matter. 83 00:06:39,790 --> 00:06:42,160 You can provide anything or you can leave it blank. 84 00:06:42,400 --> 00:06:43,840 No issues with that. 85 00:06:44,290 --> 00:06:51,100 So this is the variable which will be storing the data which is being typed, and this is the function 86 00:06:51,100 --> 00:06:54,400 which is responsible for changing that variable. 87 00:06:54,700 --> 00:06:58,300 OK, so next, we need to provide a function. 88 00:06:59,110 --> 00:07:02,950 We need to provide a function in this and this input field. 89 00:07:03,250 --> 00:07:06,330 So which is responsible for capturing the data? 90 00:07:06,460 --> 00:07:13,030 You know, when we are typing, so as as we are typing, there should be some function which we should 91 00:07:13,060 --> 00:07:16,780 trigger on any or on every type of the keyboard. 92 00:07:16,990 --> 00:07:21,400 Now every single alphabet we type that needs to be recorded somewhere, right? 93 00:07:21,610 --> 00:07:27,310 So for that, we need to provide a function which gets triggered here on changing this input. 94 00:07:27,490 --> 00:07:29,080 So for that, we have a function. 95 00:07:29,080 --> 00:07:30,490 We just call less content. 96 00:07:30,850 --> 00:07:31,960 This is our default function. 97 00:07:32,800 --> 00:07:34,630 So we will provide on change. 98 00:07:35,620 --> 00:07:39,250 And on June expects a function callback function. 99 00:07:39,490 --> 00:07:49,030 So inside this, we will provide a function, so that will be we can provide a factor of like a line 100 00:07:49,030 --> 00:07:54,400 function, which is the fact that the function or you can prove you can declare the function here and 101 00:07:54,400 --> 00:07:57,190 you going to define everything and then you can just call it with the name. 102 00:07:57,190 --> 00:07:59,020 So I'm doing it in line. 103 00:07:59,050 --> 00:08:00,790 So let me just teach you how to do that. 104 00:08:01,920 --> 00:08:08,260 So this is a syntax for it, and we are passing an argument which is E or event. 105 00:08:08,260 --> 00:08:09,280 You can write e autrement. 106 00:08:09,700 --> 00:08:12,200 So then you will provide this vital tool. 107 00:08:12,580 --> 00:08:16,350 And next is that it expects like, no, that, don't you? 108 00:08:16,690 --> 00:08:17,580 So what does it have done? 109 00:08:17,590 --> 00:08:21,510 You can provide apparent legal basis if you want, or you can just do it like that. 110 00:08:21,550 --> 00:08:22,660 No issues with that. 111 00:08:22,960 --> 00:08:23,290 All right. 112 00:08:23,770 --> 00:08:30,760 So now you have to like parse like every value which would Typekit or where it should pass. 113 00:08:31,130 --> 00:08:37,480 So here I will call this function, this function, you see, because this is the function which is 114 00:08:37,480 --> 00:08:39,910 responsible for changing the value here. 115 00:08:40,510 --> 00:08:47,680 And once we call this, we need to pass the keystrokes like whatever we are typing that we need to pass 116 00:08:47,680 --> 00:08:48,040 on it. 117 00:08:48,670 --> 00:08:48,970 OK. 118 00:08:49,240 --> 00:08:51,910 So have will call that function that is set. 119 00:08:53,410 --> 00:08:54,130 So search. 120 00:08:54,430 --> 00:08:54,880 All right. 121 00:08:55,300 --> 00:09:00,460 And then inside this, we will pass whatever is being typed. 122 00:09:00,580 --> 00:09:00,940 All right. 123 00:09:01,150 --> 00:09:06,840 So that will be event on E Dot Target Dot menu. 124 00:09:08,350 --> 00:09:08,740 Value. 125 00:09:09,010 --> 00:09:09,370 All right. 126 00:09:09,760 --> 00:09:13,450 Now we need to also give of value for this. 127 00:09:14,050 --> 00:09:16,290 I want to describe like what I what is the value? 128 00:09:16,430 --> 00:09:21,730 So we need to provide discount to the value and we need to provide this. 129 00:09:23,920 --> 00:09:28,000 What is the value for value will be so rich? 130 00:09:29,410 --> 00:09:32,260 Well, do you see this as such done? 131 00:09:33,940 --> 00:09:36,820 So it is like whatever is the variable here. 132 00:09:37,030 --> 00:09:37,320 OK. 133 00:09:37,810 --> 00:09:38,650 The search. 134 00:09:39,400 --> 00:09:40,230 It's my bad. 135 00:09:41,220 --> 00:09:42,180 OK, search jump. 136 00:09:42,520 --> 00:09:42,790 OK. 137 00:09:43,210 --> 00:09:45,370 So let me just turn on the world for that. 138 00:09:46,330 --> 00:09:46,930 We do this. 139 00:09:46,990 --> 00:09:47,410 OK? 140 00:09:47,530 --> 00:09:49,660 Was that because it's going like? 141 00:09:49,930 --> 00:09:52,030 And like so far and I cannot see it. 142 00:09:52,300 --> 00:09:55,890 OK, so now we have done this now. 143 00:09:56,680 --> 00:10:01,060 We'll check whatever we type is being like recorded in that credible or not. 144 00:10:01,360 --> 00:10:03,130 Before that, let me just do it. 145 00:10:04,690 --> 00:10:11,830 Console.log hear and see control dot log and are variable in there to the search term. 146 00:10:12,400 --> 00:10:19,570 So this will be seen in the browser and I may make a small mistake I made. 147 00:10:19,870 --> 00:10:23,700 That is, your component name should always start with uppercase. 148 00:10:23,760 --> 00:10:25,270 So this this was small. 149 00:10:25,270 --> 00:10:28,150 So I just do like evidence for you to do that. 150 00:10:28,240 --> 00:10:29,660 Never make this mistake. 151 00:10:29,660 --> 00:10:33,070 Your component names should always start with a capital letter. 152 00:10:33,280 --> 00:10:34,300 OK, so this will start. 153 00:10:34,300 --> 00:10:35,350 So this time this has started. 154 00:10:35,400 --> 00:10:41,360 I stopped it while there was a typo, so I figured, OK, OK, so let me just save it and let me take 155 00:10:41,360 --> 00:10:42,070 you to the browser. 156 00:10:43,500 --> 00:10:47,520 And if I open the inspector with F12. 157 00:10:48,430 --> 00:10:51,370 So add whatever I Typekit should reflect. 158 00:10:52,610 --> 00:10:54,980 So it's an empty string of shows. 159 00:10:55,310 --> 00:10:56,010 Just take a look. 160 00:10:56,060 --> 00:10:56,360 OK. 161 00:10:56,930 --> 00:11:04,760 So I will write maybe Punic, be you and you'll see every alphabet I type is recorded and reflected 162 00:11:04,760 --> 00:11:05,090 in this. 163 00:11:05,540 --> 00:11:10,910 If we just get reflected, that means it's working properly and our variable is storing the data, which 164 00:11:10,910 --> 00:11:14,330 we see see everything is being tapped. 165 00:11:14,340 --> 00:11:20,780 So if I if I write to Bangalore, everything is being that is being recorded. 166 00:11:21,500 --> 00:11:25,010 OK, so that is what I was trying to tell you. 167 00:11:25,040 --> 00:11:32,540 So this is the variable which is storing all the the keyword, and this is the function which is responsible 168 00:11:32,540 --> 00:11:36,290 for like getting each alphabet and making it a word. 169 00:11:36,740 --> 00:11:42,320 So engines like on change, on change of the input, it like the name, which sort of justifies, you 170 00:11:42,320 --> 00:11:44,780 know, on change, on changing the input value. 171 00:11:45,470 --> 00:11:48,680 This function triggers and it updates. 172 00:11:49,070 --> 00:11:49,370 OK. 173 00:11:49,880 --> 00:11:50,890 So that's it. 174 00:11:50,910 --> 00:11:53,220 Now we can commented on or we can even delete it. 175 00:11:53,240 --> 00:11:55,100 We don't need this control. 176 00:11:55,520 --> 00:12:01,940 OK, so next we'll be adding functionality to the search button like whenever we hit the search button. 177 00:12:02,270 --> 00:12:05,680 So what should be done in the background? 178 00:12:05,690 --> 00:12:06,620 What should be the logic? 179 00:12:06,950 --> 00:12:08,300 So that will do in the next few?