You know, what we'll do is we'll take down the app provider so that app provider will be containing
all of the props, which we have like whatever the data which we are grabbing.
So that data would be parsed for there to the trial components or to the children of that particular
root component.
So that will be passed only through the app provider because that provider is the only like component
that is responsible for the transfer of the state or the context from parent to child or the route to
the children.
So let us just create a written after this use effect over this use effect is ending.
After that, you can just go ahead and can you turn it on?
And you know, what we'll do is we'll create a.
Next, right.
So why does.
Not a provider.
Have context talked?
And we'll give all value to it.
And you had value that would be an object basically to.
There will be some events inside this, so that will be a loading state building.
Next, we'll have the contents.
Cocktails and after that, we'll have the search term.
So it's.
Don't.
X will have the third, so it's dumb, because that is also important, like when there were these several
types or which function will be called for that will be exported from here on, you know?
So here will write the act.
What, Tom?
OK, so this is what the value will be containing.
And now I will close this egg and this will give me enclosing tag automatically inside to provide component.
What we'll do is we'll provide a child and a child will be passed inside this OK child now, which child
is there that is coming from him?
Wait, let me see.
OK, inside the app provider here, only you'll provide a child or let me just make it.
I did not like it in the beginning.
Let me just say children here are not child.
Basically are children.
Don't.
This was this was also an object.
And now this is the children, which is that here inside the app context, provide context, provide
or provide analysis.
So far, so good.
Now we'll pass the value inside this app context.
Provide now the value that the children, because that is, the data which you're passing from the parent
to child is like, we have named it as children.
That is the object, basically and will write or whatever is the data.
There it is, children.
Front.
All.
And this is not the case.
Children.
OK, so.
I think I need to close this return.
Is it closed?
Yeah, that's close to let me provide a semicolon here, and after that, also a semicolon to.
Now are 99 percent of the work is done from the global context because this was the global context and
like we have been all of the by here like getting the data and fetching it from the endpoint and storing
it in the variable, then converting it into Jason.
All of that part, we have done the only one percent part of of it is left inside the context or just
I'm not talking about the product, I'm talking about the context, noble context.
Like for that 99 percent of the part, it's talk.
Now let us export this on.
So because we have not yet provided any default export or like in lens export in the function store,
then we need to provide it at the.
OK, so here we'll provide that export.
So here I'll write.
First fall, we'll write export.
Sport.
So this feels like the app.
And text and the app providers.
Yeah.
This one.
So that is being exported, and we need to export another constraint that is the global context is responsible
for all of the global imports from the U.S.
Global context?
Well, that will do about this.
And here we'll trade the.
Export forms and it will reduce.
Global, basically, this is the convention where you can give any name you want to.
There's no compulsion with that.
And inside this, we'll return.
Rick Don, you can text.
And inside this will pass the applicant next.
So far, so good.
And this is the final line of code inside Harken back started to chase.
Like this, was it for this context or this component of the fight or whatever you call?
OK, let's save it.
So next, we'll be creating the search component to what will be dead in the search component is that
it will have an input field value will vary, will type the whether the user will give the input and
from there there will be a variable that will be grabbing that particular input and that value will
be passed through to the API endpoint and from there will be fetching up the data.
So put that behind the scenes will take place here inside the context.
Yes, but for the sake of the UI and the frontend, we'll be showing it on the component.
And that component will be the third component basically so that we'll be creating inside two components,
then we'll be working towards it.
So let me just create inside this company.
Let me create a file.
Its name would be studied.
So it's.
Bomb squad tests.
And I'll be grabbing of the snippet cord with this extension of me.
And that would give me the boilerplate or the starting or the default code or any component because
this code is similar for every component.
The venue like this is the initial building block of every component.
So there's this not need to be tied manually every time when you come here.
So I have created this successfully and now we will be giving functionality to this third form.
There will be a lot of things we knew going in going from this side to form, but we will be making
use of this context.
Normal contacts inside this particular site from.