1 00:00:01,460 --> 00:00:08,510 You know, what we'll do is we'll take down the app provider so that app provider will be containing 2 00:00:08,510 --> 00:00:14,150 all of the props, which we have like whatever the data which we are grabbing. 3 00:00:14,150 --> 00:00:21,140 So that data would be parsed for there to the trial components or to the children of that particular 4 00:00:21,140 --> 00:00:22,070 root component. 5 00:00:22,310 --> 00:00:29,120 So that will be passed only through the app provider because that provider is the only like component 6 00:00:29,120 --> 00:00:38,180 that is responsible for the transfer of the state or the context from parent to child or the route to 7 00:00:38,180 --> 00:00:38,810 the children. 8 00:00:39,260 --> 00:00:47,360 So let us just create a written after this use effect over this use effect is ending. 9 00:00:48,050 --> 00:00:51,680 After that, you can just go ahead and can you turn it on? 10 00:00:55,960 --> 00:00:59,320 And you know, what we'll do is we'll create a. 11 00:01:03,070 --> 00:01:04,690 Next, right. 12 00:01:05,640 --> 00:01:06,540 So why does. 13 00:01:08,520 --> 00:01:09,720 Not a provider. 14 00:01:10,920 --> 00:01:12,210 Have context talked? 15 00:01:16,400 --> 00:01:18,770 And we'll give all value to it. 16 00:01:22,630 --> 00:01:29,170 And you had value that would be an object basically to. 17 00:01:30,520 --> 00:01:36,910 There will be some events inside this, so that will be a loading state building. 18 00:01:37,330 --> 00:01:39,310 Next, we'll have the contents. 19 00:01:40,240 --> 00:01:43,650 Cocktails and after that, we'll have the search term. 20 00:01:44,610 --> 00:01:45,150 So it's. 21 00:01:46,300 --> 00:01:46,660 Don't. 22 00:01:48,700 --> 00:01:55,300 X will have the third, so it's dumb, because that is also important, like when there were these several 23 00:01:55,300 --> 00:02:01,830 types or which function will be called for that will be exported from here on, you know? 24 00:02:02,140 --> 00:02:04,780 So here will write the act. 25 00:02:05,950 --> 00:02:07,040 What, Tom? 26 00:02:07,510 --> 00:02:11,200 OK, so this is what the value will be containing. 27 00:02:11,530 --> 00:02:20,950 And now I will close this egg and this will give me enclosing tag automatically inside to provide component. 28 00:02:21,010 --> 00:02:29,800 What we'll do is we'll provide a child and a child will be passed inside this OK child now, which child 29 00:02:29,800 --> 00:02:31,990 is there that is coming from him? 30 00:02:32,550 --> 00:02:33,700 Wait, let me see. 31 00:02:34,270 --> 00:02:40,390 OK, inside the app provider here, only you'll provide a child or let me just make it. 32 00:02:40,390 --> 00:02:42,250 I did not like it in the beginning. 33 00:02:42,640 --> 00:02:45,670 Let me just say children here are not child. 34 00:02:45,670 --> 00:02:46,750 Basically are children. 35 00:02:48,130 --> 00:02:48,300 Don't. 36 00:02:51,990 --> 00:02:54,220 This was this was also an object. 37 00:02:54,670 --> 00:03:04,090 And now this is the children, which is that here inside the app context, provide context, provide 38 00:03:04,320 --> 00:03:06,100 or provide analysis. 39 00:03:06,610 --> 00:03:07,420 So far, so good. 40 00:03:07,630 --> 00:03:11,470 Now we'll pass the value inside this app context. 41 00:03:11,470 --> 00:03:18,190 Provide now the value that the children, because that is, the data which you're passing from the parent 42 00:03:18,190 --> 00:03:21,730 to child is like, we have named it as children. 43 00:03:22,250 --> 00:03:26,290 That is the object, basically and will write or whatever is the data. 44 00:03:27,480 --> 00:03:28,260 There it is, children. 45 00:03:30,940 --> 00:03:31,140 Front. 46 00:03:32,200 --> 00:03:32,590 All. 47 00:03:34,040 --> 00:03:36,140 And this is not the case. 48 00:03:37,590 --> 00:03:37,960 Children. 49 00:03:39,530 --> 00:03:41,190 OK, so. 50 00:03:43,340 --> 00:03:46,550 I think I need to close this return. 51 00:03:47,460 --> 00:03:48,240 Is it closed? 52 00:03:48,300 --> 00:03:57,360 Yeah, that's close to let me provide a semicolon here, and after that, also a semicolon to. 53 00:03:58,370 --> 00:04:08,090 Now are 99 percent of the work is done from the global context because this was the global context and 54 00:04:09,020 --> 00:04:16,040 like we have been all of the by here like getting the data and fetching it from the endpoint and storing 55 00:04:16,040 --> 00:04:18,620 it in the variable, then converting it into Jason. 56 00:04:19,280 --> 00:04:27,450 All of that part, we have done the only one percent part of of it is left inside the context or just 57 00:04:27,470 --> 00:04:31,420 I'm not talking about the product, I'm talking about the context, noble context. 58 00:04:31,420 --> 00:04:34,880 Like for that 99 percent of the part, it's talk. 59 00:04:35,480 --> 00:04:38,510 Now let us export this on. 60 00:04:38,690 --> 00:04:46,100 So because we have not yet provided any default export or like in lens export in the function store, 61 00:04:46,100 --> 00:04:47,700 then we need to provide it at the. 62 00:04:48,680 --> 00:04:52,070 OK, so here we'll provide that export. 63 00:04:53,450 --> 00:04:55,100 So here I'll write. 64 00:04:57,380 --> 00:04:59,830 First fall, we'll write export. 65 00:05:03,440 --> 00:05:04,070 Sport. 66 00:05:06,170 --> 00:05:08,700 So this feels like the app. 67 00:05:09,800 --> 00:05:13,490 And text and the app providers. 68 00:05:15,230 --> 00:05:15,530 Yeah. 69 00:05:15,680 --> 00:05:16,100 This one. 70 00:05:18,650 --> 00:05:29,450 So that is being exported, and we need to export another constraint that is the global context is responsible 71 00:05:29,450 --> 00:05:32,480 for all of the global imports from the U.S. 72 00:05:33,110 --> 00:05:33,980 Global context? 73 00:05:34,610 --> 00:05:36,590 Well, that will do about this. 74 00:05:36,590 --> 00:05:38,480 And here we'll trade the. 75 00:05:39,960 --> 00:05:44,430 Export forms and it will reduce. 76 00:05:45,440 --> 00:05:51,500 Global, basically, this is the convention where you can give any name you want to. 77 00:05:52,250 --> 00:05:54,110 There's no compulsion with that. 78 00:05:56,530 --> 00:05:58,810 And inside this, we'll return. 79 00:06:00,540 --> 00:06:04,740 Rick Don, you can text. 80 00:06:06,160 --> 00:06:09,730 And inside this will pass the applicant next. 81 00:06:15,220 --> 00:06:16,240 So far, so good. 82 00:06:17,460 --> 00:06:22,950 And this is the final line of code inside Harken back started to chase. 83 00:06:24,120 --> 00:06:30,480 Like this, was it for this context or this component of the fight or whatever you call? 84 00:06:31,320 --> 00:06:32,430 OK, let's save it. 85 00:06:34,350 --> 00:06:41,820 So next, we'll be creating the search component to what will be dead in the search component is that 86 00:06:41,820 --> 00:06:48,090 it will have an input field value will vary, will type the whether the user will give the input and 87 00:06:48,750 --> 00:06:55,590 from there there will be a variable that will be grabbing that particular input and that value will 88 00:06:55,590 --> 00:07:00,930 be passed through to the API endpoint and from there will be fetching up the data. 89 00:07:01,350 --> 00:07:06,840 So put that behind the scenes will take place here inside the context. 90 00:07:07,110 --> 00:07:14,130 Yes, but for the sake of the UI and the frontend, we'll be showing it on the component. 91 00:07:14,130 --> 00:07:21,480 And that component will be the third component basically so that we'll be creating inside two components, 92 00:07:21,990 --> 00:07:23,430 then we'll be working towards it. 93 00:07:23,860 --> 00:07:27,060 So let me just create inside this company. 94 00:07:27,070 --> 00:07:28,230 Let me create a file. 95 00:07:32,230 --> 00:07:33,830 Its name would be studied. 96 00:07:37,400 --> 00:07:37,940 So it's. 97 00:07:39,310 --> 00:07:41,350 Bomb squad tests. 98 00:07:42,390 --> 00:07:48,710 And I'll be grabbing of the snippet cord with this extension of me. 99 00:07:49,560 --> 00:07:56,550 And that would give me the boilerplate or the starting or the default code or any component because 100 00:07:56,550 --> 00:08:00,180 this code is similar for every component. 101 00:08:00,190 --> 00:08:04,880 The venue like this is the initial building block of every component. 102 00:08:04,890 --> 00:08:10,170 So there's this not need to be tied manually every time when you come here. 103 00:08:11,460 --> 00:08:18,720 So I have created this successfully and now we will be giving functionality to this third form. 104 00:08:19,020 --> 00:08:25,200 There will be a lot of things we knew going in going from this side to form, but we will be making 105 00:08:25,200 --> 00:08:26,370 use of this context. 106 00:08:26,760 --> 00:08:30,210 Normal contacts inside this particular site from.