1
00:00:00,920 --> 00:00:05,390
In the last video we created this new blog provider component so you might be kind of curious what's

2
00:00:05,390 --> 00:00:09,690
this context object and what is this blog context stop provider thing.

3
00:00:09,710 --> 00:00:15,530
So it turns out that when we create a context object as we did right here we also get inside that object

4
00:00:15,590 --> 00:00:17,540
something called the provider.

5
00:00:17,660 --> 00:00:20,760
This provider thing is what's going to accept some information.

6
00:00:20,780 --> 00:00:25,790
So essentially it's going to be kind of a source of information back over here and whatever information

7
00:00:25,790 --> 00:00:26,560
we provide it.

8
00:00:26,630 --> 00:00:29,660
It's going to make available to all of our child components.

9
00:00:29,690 --> 00:00:34,790
So this is the actual mechanism that's going to move some information from the blog post provider down

10
00:00:34,790 --> 00:00:36,960
to a child like blog list.

11
00:00:36,980 --> 00:00:38,870
Let me show you how it works.

12
00:00:38,870 --> 00:00:43,700
So if I want to share some information from this very top level component down to some nested child

13
00:00:44,300 --> 00:00:49,250
I'm going to come back to my blog context provider right here and I'm going to give it a prop called

14
00:00:49,340 --> 00:00:52,420
value right now for value.

15
00:00:52,430 --> 00:00:54,700
I'm going to put in a value of simply five.

16
00:00:55,460 --> 00:01:01,130
So this means that I want to share the number five from this parent component up here with some deeply

17
00:01:01,130 --> 00:01:02,930
nested child down here.

18
00:01:02,990 --> 00:01:08,060
So now any of our child components can add in a little bit of code that's going to essentially reach

19
00:01:08,250 --> 00:01:14,850
back up to that provider and extract that value prop now for right now having a piece of information

20
00:01:14,850 --> 00:01:19,260
of simply five is not very useful but we're just going to try to get access to that value right there

21
00:01:19,260 --> 00:01:24,650
inside of a nested component and we'll figure out how we can put in more complex values after that.

22
00:01:24,690 --> 00:01:24,910
Okay.

23
00:01:24,930 --> 00:01:29,880
So let's now figure out how we can get access to that value right there inside of some deeply nested

24
00:01:29,890 --> 00:01:37,240
child to get started inside of my blog context J J.S. file I'm going to export the blog context object

25
00:01:37,420 --> 00:01:38,470
that we created right here.

26
00:01:38,470 --> 00:01:46,660
So I'll say export default in this case blog context and then going to decide on what component side

27
00:01:46,660 --> 00:01:52,240
of my application I want to have get access to that piece of information that value of 5.

28
00:01:52,260 --> 00:01:56,700
In this case we really only have one appropriate component that's our index screen.

29
00:01:57,150 --> 00:02:01,110
So let's open up our index screen and we're going to try to make sure that it can get access to that

30
00:02:01,110 --> 00:02:03,620
piece of information right there.

31
00:02:03,630 --> 00:02:06,530
So here's my next screen inside of here.

32
00:02:06,550 --> 00:02:13,420
We're going to import that blog context object that we just exported from the blog context file so at

33
00:02:13,420 --> 00:02:24,950
the top I'm going to import blog context from up one directory context blog context then to actually

34
00:02:24,950 --> 00:02:29,930
make use of that context we're going to import another hook function from the react library.

35
00:02:29,930 --> 00:02:35,270
Remember hooks are functions that add in some additional functionality to a function component.

36
00:02:35,330 --> 00:02:41,300
So on my import statement I'm going to add in an import from react inside of a set of curly braces and

37
00:02:41,300 --> 00:02:45,220
we're going to get a function called use context.

38
00:02:45,230 --> 00:02:50,510
So this essentially is a function that's going to say OK look at some context object and give us access

39
00:02:50,750 --> 00:02:57,990
to that things value prop right there so to make use of blog context and use context together we're

40
00:02:57,990 --> 00:03:01,220
going to add in a new variable declaration inside of next screen.

41
00:03:01,500 --> 00:03:10,160
We'll say const value is used context and we're gonna pass in our entire context object.

42
00:03:10,200 --> 00:03:17,070
That's blog context like so it's now the number or the Variable value right here is going to be exactly

43
00:03:17,070 --> 00:03:22,730
equal to whatever value prop we assigned to our blog context provider back over here.

44
00:03:22,770 --> 00:03:26,970
Now at this point I just want take a very quick pause and I want to remind you that one of the downsides

45
00:03:26,970 --> 00:03:30,960
to context that I mentioned is that there is a lot of special terms here.

46
00:03:30,960 --> 00:03:32,120
And I think you can agree with me.

47
00:03:32,130 --> 00:03:37,950
We've got this term context and we've got this term provider flying around all over the place all these

48
00:03:37,950 --> 00:03:43,950
words provider and context are really hiding the true meaning of what's going on the actual relationship

49
00:03:43,950 --> 00:03:45,400
or the movement of data here.

50
00:03:45,420 --> 00:03:48,300
Trust me is really really simple.

51
00:03:48,300 --> 00:03:49,600
Here's what it comes down to.

52
00:03:49,600 --> 00:03:51,840
We create a context object.

53
00:03:51,840 --> 00:03:58,770
We show the context object thing dot provider and then we give it a value prop that has whatever information

54
00:03:58,890 --> 00:04:00,240
that we want to share.

55
00:04:00,630 --> 00:04:01,890
That's it on the top level.

56
00:04:01,890 --> 00:04:09,140
That's all we have to do up here at the very top end then anytime they want to get access to that information.

57
00:04:09,150 --> 00:04:14,880
So like over here inside this component we're going to import used context and the context object that

58
00:04:14,880 --> 00:04:16,530
we had created.

59
00:04:16,530 --> 00:04:21,490
We're gonna call use context putting that context object and that's going to give us out the value.

60
00:04:22,140 --> 00:04:27,900
So again ignore all these fancy pieces of terminology it comes down to a very simple relationship.

61
00:04:28,050 --> 00:04:35,040
Throw in a value prop get value prop that's it that's all that's going on to actually prove that to

62
00:04:35,040 --> 00:04:35,410
you.

63
00:04:35,460 --> 00:04:40,380
I'm gonna add in a new text element inside of index screen and inside of here I'm going to print out

64
00:04:40,440 --> 00:04:47,430
whatever value is like so I'll save this I'll flip back over and now I can see the number five appear

65
00:04:47,430 --> 00:04:48,300
right there.

66
00:04:48,450 --> 00:04:53,550
So it's very clear that whatever value we put in on this provider over here whatever we put in right

67
00:04:53,550 --> 00:04:59,940
there we can retrieve inside of some other component by just calling use context and passing in blog

68
00:04:59,940 --> 00:05:01,150
context.

69
00:05:01,200 --> 00:05:06,000
Now if you want to back inside of our blog context J.S. file we can update that value and make it like

70
00:05:06,060 --> 00:05:07,580
15 instead.

71
00:05:07,680 --> 00:05:10,100
If I then save that I'll see 15 up here.

72
00:05:10,410 --> 00:05:18,240
If I change the value to something like Hi there I'll see hi there appear and I bet you can guess what

73
00:05:18,240 --> 00:05:19,050
else we could do here.

74
00:05:19,050 --> 00:05:25,430
Like maybe we could put in a array of 1 2 3 and we'll see that up here and so on.

75
00:05:25,430 --> 00:05:28,350
Now if you try to put an object inside of here you're going to see an error right now.

76
00:05:28,430 --> 00:05:33,620
The reason for that is that we cannot render a text object with react and we actually saw that way earlier

77
00:05:33,620 --> 00:05:36,390
inside the course it ends up with a error message.

78
00:05:36,410 --> 00:05:41,690
So suffice it to say for right now we can get some information from this parent component down to a

79
00:05:41,780 --> 00:05:46,850
arbitrary child by just using this value thing and use context.

80
00:05:47,030 --> 00:05:48,660
That's it.

81
00:05:48,670 --> 00:05:48,940
All right.

82
00:05:48,940 --> 00:05:52,960
So now that we understand these basics let's come back the next video we're going to start to add in

83
00:05:53,020 --> 00:05:54,690
a little bit more functionality here.

84
00:05:54,760 --> 00:05:59,050
It makes sure that we can eventually maybe change this data that we're passing down because just having

85
00:05:59,110 --> 00:06:01,580
a static list of numbers is not super useful.

86
00:06:01,720 --> 00:06:03,760
So quick pause we'll figure that out in the next video.