1
00:00:00,980 --> 00:00:05,930
We've now got both a square screen component and multiple color counters that we're showing inside of

2
00:00:05,930 --> 00:00:06,600
it.

3
00:00:06,680 --> 00:00:09,140
So it starts to raise a really interesting question.

4
00:00:09,200 --> 00:00:14,570
We need to have three different state variables one for tracking the amount of red one for the amount

5
00:00:14,570 --> 00:00:17,630
of blue and one for the amount of green that we're trying to show to the user.

6
00:00:18,320 --> 00:00:22,480
So now we need to figure out exactly where we're going to locate those different state variables.

7
00:00:22,490 --> 00:00:25,030
In other words where are we going to create them.

8
00:00:25,070 --> 00:00:29,690
Are we going to create a state variable inside of square screen or are we going to create three separate

9
00:00:29,690 --> 00:00:32,170
ones in each of these different components.

10
00:00:32,210 --> 00:00:35,960
This video we're going to take a look at a couple diagrams that's going to give us guidance on how we

11
00:00:35,960 --> 00:00:38,810
tackle exactly this problem.

12
00:00:38,900 --> 00:00:42,740
OK so first off here's a diagram of our current component hierarchy.

13
00:00:42,770 --> 00:00:48,590
We've got our square screen that is the parent and we've got three separate instances of color counter

14
00:00:49,220 --> 00:00:55,930
one for showing red one for green and one for blue and the first thing I want to point out here is that

15
00:00:55,990 --> 00:01:00,520
all these different components kind of have different demands on these state variables we want to create

16
00:01:01,120 --> 00:01:06,280
in the case of the square screen this thing wants to only read the three different state variables that

17
00:01:06,280 --> 00:01:07,820
we need to create.

18
00:01:07,990 --> 00:01:12,280
When I say three different state values I'm talking about one state variable for checking the amount

19
00:01:12,280 --> 00:01:15,690
of red one for the amount of green and one for the amount of blue.

20
00:01:15,700 --> 00:01:22,740
And remember those different values are going to range from zero up to 255 square screen needs to read

21
00:01:22,740 --> 00:01:26,820
these three different state values because it's going to eventually be responsible for showing that

22
00:01:26,820 --> 00:01:32,720
colored square and applying those three different colors to it as a background color property.

23
00:01:32,970 --> 00:01:38,580
On the other hand these child child components down here need to change those different values because

24
00:01:38,580 --> 00:01:43,230
each of them are going to show some buttons that are going to allow a user to tap it to either increase

25
00:01:43,290 --> 00:01:46,440
say or the amount of red or decrease the amount of red.

26
00:01:46,440 --> 00:01:48,980
Same thing for green and blue.

27
00:01:49,020 --> 00:01:53,220
So with that in mind here's the general rule that we're going to use anytime we've got some kind of

28
00:01:53,400 --> 00:01:58,090
shared state that needs to be distributed among multiple different components.

29
00:01:58,140 --> 00:02:04,470
So generally we're going to create state variables in the most parent component that needs to either

30
00:02:04,530 --> 00:02:07,590
read or change a state value.

31
00:02:07,590 --> 00:02:13,440
In this case the square screen is the most parent component and it needs to read those three different

32
00:02:13,440 --> 00:02:14,850
state values.

33
00:02:14,940 --> 00:02:19,860
So we're going to create those three different state values inside of square screen.

34
00:02:19,860 --> 00:02:25,170
Now notice I say on here generally there are some situations and situations that we're going to definitely

35
00:02:25,170 --> 00:02:30,450
run into together inside of this course where this rule doesn't quite apply what you're going to see

36
00:02:30,450 --> 00:02:36,400
those situations in great detail as we start to work on these other applications so again we're going

37
00:02:36,400 --> 00:02:40,870
to locate or we're going to create our three different state values inside of square screen because

38
00:02:40,900 --> 00:02:48,470
it is the most parent component that needs to either read or change those three state values now that

39
00:02:48,470 --> 00:02:50,590
starts to raise a really interesting question.

40
00:02:50,690 --> 00:02:56,610
If we create these three different state values inside of square screen how are cow color counter on

41
00:02:56,660 --> 00:02:57,550
all three of these.

42
00:02:57,590 --> 00:03:00,140
How are they going to change those values.

43
00:03:00,140 --> 00:03:04,610
And for that matter if our application was different how would they read those values if they needed

44
00:03:04,610 --> 00:03:05,250
to as well.

45
00:03:06,140 --> 00:03:09,740
Well two diagrams to answer those questions.

46
00:03:09,770 --> 00:03:16,340
So first off if a child ever needs to read a state value that is created inside the parent then we can

47
00:03:16,340 --> 00:03:19,310
pass that state value down as a prop.

48
00:03:19,340 --> 00:03:24,800
Now just a quick aside here our application in our application color counter does not need to read these

49
00:03:24,800 --> 00:03:26,240
values whatsoever.

50
00:03:26,240 --> 00:03:31,110
Color counter has nothing to do with actually reading or printing out the current color values.

51
00:03:31,220 --> 00:03:36,310
I'm just showing you this for your own info just you understand how we would approach this problem.

52
00:03:36,310 --> 00:03:42,320
So if we for some reason had to communicate the current value of red or green or blue from Square screen

53
00:03:42,380 --> 00:03:47,760
down to color counters we would pass it down as a prop using the prop system.

54
00:03:47,760 --> 00:03:51,620
So remember I showed you a diagram a little bit ago about state and I said that we could technically

55
00:03:51,620 --> 00:03:57,350
pass a state value down to a child as a prop and that's where the state system and the prop system start

56
00:03:57,350 --> 00:04:00,700
to kind of commingle and that's when they get a little bit confusing.

57
00:04:00,770 --> 00:04:03,790
Once again we're going to see an example of this later on INSIDE THE COURSE.

58
00:04:03,800 --> 00:04:06,410
So don't worry you'll get a lot of experience with this as well.

59
00:04:07,120 --> 00:04:10,930
Now what about if a child component needs to change a state value.

60
00:04:10,930 --> 00:04:12,160
That's the situation we're in.

61
00:04:12,160 --> 00:04:16,810
We need our child components to change the value of red or green or blue.

62
00:04:16,930 --> 00:04:22,720
That's currently being managed by square screen if that's the case then we're going to pass a callback

63
00:04:22,720 --> 00:04:25,570
function down to these children as a problem.

64
00:04:25,570 --> 00:04:30,580
So we're going to essentially pass down a callback function from Square screen down to color counter

65
00:04:31,090 --> 00:04:37,450
and inside that callback function color counter can invoke that function and make a change to that state

66
00:04:37,450 --> 00:04:43,180
value that will change the state value inside of square screen causing it to re render and remember

67
00:04:43,180 --> 00:04:49,630
whenever a parent reenters or kind of re shows itself on the screen it will also render all of its children

68
00:04:49,690 --> 00:04:51,260
as well.

69
00:04:51,380 --> 00:04:51,620
All right.

70
00:04:51,630 --> 00:04:54,330
So in this video I showed you a couple confusing diagrams.

71
00:04:54,330 --> 00:05:00,480
This is just our first taste taste of managing state between different parent child components.

72
00:05:00,480 --> 00:05:05,260
So I'm sure at this point some of this terminology is a little bit strange but like I said you're gonna

73
00:05:05,280 --> 00:05:10,920
get a lot of practice doing exactly these different scenarios throughout different applications inside

74
00:05:10,920 --> 00:05:12,060
this course.

75
00:05:12,060 --> 00:05:16,520
As a matter of fact we're going to have to essentially do this exact case right here in the next video.

76
00:05:16,570 --> 00:05:21,210
So let's take a quick pause and in the next video video we're going to make sure that the square screen

77
00:05:21,240 --> 00:05:26,370
passes a callback function down to each of these different components that will allow those components

78
00:05:26,370 --> 00:05:28,680
to update those state values.

79
00:05:28,700 --> 00:05:30,810
It's a quick pause and I'll see you in just a minute.