Okay.
In this video we will be talking about context before I mention communication between the parent and
child.
And we've done that with props so we can pass any information to the child with this props here and
then we can receive it in the in the child and then we can do it in the same way going up like we've
done it here.
So basically this is a very efficient way to communicate.
But sometimes when your application is large, this is not efficient anymore because you might have
a thousands of different components and they are not really necessary one parent to another.
So passing this props might be too much, especially if you have a lot of parent and child.
So let's say we have some information on the top parent and we'd like to pass it down a few components.
So we will need to pass it from the parent to the child, from the parent to the child, and so on and
so on until you will get it in the child you want to receive it.
And sometimes this is not really efficient because you will need to do a lot of steps there.
So React has a new way to do this and it's called context.
So basically what context context is, it's a kind of global state variable that we can keep.
So what we have in context is we create a context and then we have a provider and consumer.
So in the provider we'll just feed the provider with the data and in the consumer we can consume the
data.
So that's how it works.
So basically we can create that context in the top level element.
And we in our case, I will create it in App.js and we can consume that in any of the child that will
wrap around it.
So I will show you that.
But I have to say our application is very small.
I wouldn't do it normally.
I'm just doing that for educational purposes only.
Normally this context shouldn't be used or overused in that way.
It should be only used in a certain situation when you need to have a global variables share in between
different components.
It's not a good idea to have everything there anyway.
Let's see how we can actually work with the context API.
Let's go to the Index.js.
This is our top level React component as we have here.
And this is where we actually render our application to the root.
So let's create a context here, and I will do that here.
So I'll do constant.
I will store my context in a constant and then I can name it.
So I will do const context and then I will do react.
Create context like this.
So this is our context.
And I said that before we can have two things.
We can have a consumer and we can have a provider.
So I can do in the same way we've done it above so I can do const.
And you can see here I'm a consumer and the same way I can do with a consumer, I can do provider.
And then here I will have a provider.
So we have three variables.
I have a variable to context.
And then from the consumer and provider, I use this context from here.
So what I need to do first, I need to have a provider.
To rub some something around it.
So usually you do that in a top level element.
In our case, we have a routing here.
So what I can do is I could wrap everything what's inside here in a provider so I could do this context
provider like here or actually, I don't need that.
Here Since I will be using this provider only in this file.
I can grab this exactly like it is here.
And let's wrap.
This will have a provider.
You can see that's my tag and it will wrap whatever it's here.
Inside provider.
That means if I will have data on my provider, that data will be available anywhere here.
So that will go to the app.
It will go to the header footer and so on.
So let's say we don't have this.
So if that will go to the app app has a header and footer here.
So it will also go down to components and components.
So wherever I would like to use it, once I'll wrap the top element component, it will be available
anywhere down this tag.
So we have a provider and actually I've created here just for you to see it.
But for now I can remove the provider because I have directly use this context provider from here.
So what we actually need to do, let's create some data and I will show you how we can actually access
that and how to create a provider.
What we will do in our example is I will go here in the place where we have actually in the footer.
Let's say we would replace this one.
So we have these animals here and at the moment we use animals from our footer component.
So if we would like to have some kind of information on the top level element and would like to use
it here in that component straight away, so I will show you how to do it.
So I will just copy this and inside index I will have something similar.
So let's say it will be of animals, but this time it will be snake.
Elephant.
And then we can go lion and whatever.
That will be just a different set then what we have in our component.
So we have animals here.
So what we can do and we have to do is we need to feed the provider with some values.
So you can see value here.
And then we pass an object.
So this is the first or the braces are for a triggering JavaScript and the other one will be an object.
So I will name this object property animals, and then I will pass this animals here.
So basically what I'm doing is I'm passing the value for a provider.
This object and this object will have animals and that will be an array of animals.
So at the moment I'm passing this animals to the provider.
That means if any down this provider in any component that will be down in this hierarchy, this animals
might be available, might be because they're not straightaway available, we'll need to use that consumer.
And the reason I put a consumer here in the const because we need to use it from different applications.
So what I will need to do is I will need to export.
This.
So we export this consumer so we can actually import it from other place.
So we'll copy this and let's go to the footer and I will import it here.
So we'll import.
Our consumer from and then we need to go.
One folder up and then index here.
So we have access to our consumer, which is actually this consumer here.
So I can close this for now.
This consumer here is using the context we have here, and this context is also providers.
You can see here, we kind of create a direct link for that context from two different places.
So here we pass the animals and then we need to go to our footer and then we need to create our consumer.
Consumer works in a similar way as we've done with our provider.
So we need to wrap something around it when we want to use it.
So instead of that div, let's use our consumer.
So I will copy this and we can have it like that.
And then what we need to do at the moment, I will just comment this out, not to confuse our code with
whatever we had before.
So what we need to do is we need to have curly brackets and then it will be our function.
So we'll have a context here and then we'll use our arrow function here and then I will have another
curly brackets like that.
And then inside that I have an access to my context.
Which is coming from this consumer.
So once I have an axis here, I can take whatever we had there before.
I will just cut it from there.
And make some more space and then I can inside that function here, I can paste it.
So what we have here is we have animals, but this time animals are not going to come from here.
But I will access the animals from context.
So I will save it now.
And we have some syntax error here.
You actually have to wrap this inside a div.
So we'll have just one element.
Like that.
So it complains about that consumer here and we export this as a consumer.
Let's try to.
Change the name, for example, like that just to trigger a.
So we'll have by default, by convention, we should actually name anything that is kind of used in
attacks by capital letter.
And in fact, this is working.
So that was the thing that whenever we name this, that should be a capital letter here.
I don't know why, but this is how it is.
So when we have that situation, then we can wrap it.
So what we did, I will show you now.
And the important thing is now we can see snake, elephant and lion.
You can see here in the footer we go, we have a loop through animals like we have it before, but this
one is actually commented out.
So at this point I can remove it completely.
And you can see here I still have that printed and this is coming from this index.js.
So we made our first context API working.
So for repeating that again, we created a context.
And then from that context we have done two things.
We've done a provider when we feed the value and this is up to you what you would like to fit in here.
The the important part is that we have object inside and then we feed that inside.
So whatever is in between that and will be in the child child child relationship will have an access
to this.
So we have a value that we can keep it and then it will be available for any child inside.
And then we export also the consumer from that context.
So this is available when we export it, we can import that from any other place and we've done that
in footer.
We just import that and we wrap our component with that consumer and with the arrow function like context.
And from that moment you have an access to content.
Any value on that context and we pass animals.
So we could loop through animals and we put the pass that animals here.
So basically that's how we can share the data in between different components and have a kind of global
state because this is global, will keep everything here and we can communicate it with this and have
an access to that and we don't need to pass it down the road every time we have parent, child, parent,
child, parent child.
So that will be the way to do it.
But as I said, don't overdo it.
This is for only cases to store the global variables, not for everything.