1
00:00:08,150 --> 00:00:09,230
In this video.

2
00:00:09,230 --> 00:00:15,130
Let's see how we can consume the data from the context API file.

3
00:00:15,140 --> 00:00:16,760
So here we go.

4
00:00:16,820 --> 00:00:19,550
And this is where we left in the previous video.

5
00:00:19,610 --> 00:00:27,260
So now we need to locate the component where we want to have access to the state and the function from

6
00:00:27,260 --> 00:00:28,040
this file.

7
00:00:28,160 --> 00:00:32,720
So we are going to implement what is called low gain functionality.

8
00:00:32,720 --> 00:00:40,700
So let's go to the login page and inside components and then forms and then the log in component.

9
00:00:40,700 --> 00:00:42,590
And here we are.

10
00:00:42,770 --> 00:00:50,570
The next step is that to be able to consume contacts, we need to use a hook called use context.

11
00:00:50,570 --> 00:00:52,700
The name is even descriptive.

12
00:00:52,730 --> 00:00:57,410
We are going to use a context and I have imported it as that.

13
00:00:57,740 --> 00:00:58,220
All right.

14
00:00:58,220 --> 00:00:59,330
So here we go.

15
00:00:59,360 --> 00:01:07,280
We are going to call the use context inside the component and start as a function call.

16
00:01:07,370 --> 00:01:13,580
And this one requires only one element, and that is an instance of create contexts.

17
00:01:13,580 --> 00:01:20,090
And for us we have it already inside the of context and this is what I'm referring to.

18
00:01:20,450 --> 00:01:26,300
So we are going to pass this of context into the use context here.

19
00:01:26,300 --> 00:01:34,400
So here let's require the of context and now we are going to pass into this and here we go.

20
00:01:34,430 --> 00:01:42,080
The next step is that we are going to assign the response or the result for calling this context to

21
00:01:42,080 --> 00:01:45,500
a variable called state and is equal to that.

22
00:01:45,590 --> 00:01:47,720
Now what is the state?

23
00:01:47,750 --> 00:01:54,440
This state now represents the data inside our value provider, which is this one.

24
00:01:54,770 --> 00:02:02,660
So any data you passing into this variable is available on this variable and this one can be anything.

25
00:02:02,690 --> 00:02:07,690
Now if I console.log the states, let's see what we have.

26
00:02:07,700 --> 00:02:09,380
Moment of truth.

27
00:02:09,410 --> 00:02:10,310
Let's save it.

28
00:02:10,430 --> 00:02:16,220
Now let's go to the component, which is a log in and now let's open our console.

29
00:02:16,250 --> 00:02:19,910
Let's play this one and let's refresh again.

30
00:02:20,000 --> 00:02:23,150
This one is are from the TV services classes.

31
00:02:23,150 --> 00:02:25,670
So what we care most is about this.

32
00:02:25,670 --> 00:02:31,820
We can see that we have access to its log in inside the log in component.

33
00:02:31,820 --> 00:02:35,450
So let's say that we are adding additional method.

34
00:02:35,450 --> 00:02:36,500
Let's say ADD.

35
00:02:36,500 --> 00:02:43,190
I'm going to be a normal function here as that you can see I have access to what is called the ADD,

36
00:02:43,190 --> 00:02:44,480
which is a function.

37
00:02:44,480 --> 00:02:48,440
Now this is how we can consume context.

38
00:02:48,590 --> 00:02:53,930
So in the next video, let's continue the implementation of logging in user.

39
00:02:53,960 --> 00:02:57,050
All right, let's go, Roxanne, in the next video, guys.