1
00:00:00,970 --> 00:00:05,910
In this video we're going to wire up a new state variable to our color screen component to do so.

2
00:00:05,910 --> 00:00:10,670
We're going to go through the same series of steps that we just did inside of our last mini application.

3
00:00:10,730 --> 00:00:14,050
I'm going to first begin by going up to my input statement from react up here.

4
00:00:14,150 --> 00:00:17,170
And I'm going to also import use states.

5
00:00:17,290 --> 00:00:22,240
Remember we refer to this thing as a hook and as a function that adds some additional functionality

6
00:00:22,390 --> 00:00:29,500
to a function component so then inside of my color screen I'm going to declare a new state variable.

7
00:00:29,510 --> 00:00:32,260
So I'll say const those square brackets.

8
00:00:32,300 --> 00:00:42,780
Say colors that's going to call my state variable and set colors I'll then call you state and then inside

9
00:00:42,780 --> 00:00:48,560
of my you state call right here I'll provide the default value or starting value or this colors variable.

10
00:00:48,630 --> 00:00:54,630
So as we mentioned we want this starting variable to be a empty array like so I'll get.

11
00:00:54,640 --> 00:00:59,920
So now inside of our button element we're going to add in an on press handler and whenever a user taps

12
00:00:59,920 --> 00:01:06,370
that thing we're going to try to update the value of colors using these set colors setter so on my button

13
00:01:06,370 --> 00:01:12,790
elements I'll add in an on press prop and I'll pass it an arrow function like so I'm going gonna give

14
00:01:12,790 --> 00:01:17,840
this arrow function a body just to give myself a little bit of space to work with so then inside of

15
00:01:17,840 --> 00:01:24,360
here we need to somehow add a new color to our colors array without somehow modifying it.

16
00:01:24,440 --> 00:01:30,000
In other words remember we don't want to make any changes to the state variable whatsoever you might

17
00:01:30,000 --> 00:01:34,200
think that we could add in a new color by adding something like colors not push.

18
00:01:34,200 --> 00:01:37,170
But this push method is going to modify that array.

19
00:01:37,320 --> 00:01:41,250
And again we don't want to ever modify these variables whatsoever.

20
00:01:41,250 --> 00:01:47,900
The only way we change it is through the use of set colors so in order to add in a new element using

21
00:01:47,900 --> 00:01:53,660
the set colors function we're going to write out set colors and we're gonna write out some kind of interesting

22
00:01:53,660 --> 00:01:58,490
syntax here I'm gonna put in a set of square brackets and then dot dot dot.

23
00:01:58,490 --> 00:02:06,660
Colors and then a comma and they're going to add in our new color by calling Random r G.B. so random

24
00:02:07,070 --> 00:02:09,260
our G.B. like so.

25
00:02:09,340 --> 00:02:10,890
So what's going on here.

26
00:02:10,890 --> 00:02:16,470
Well essentially we are creating a brand new array by putting in a new set of curly brace or new square

27
00:02:16,470 --> 00:02:17,830
brackets right here.

28
00:02:18,090 --> 00:02:21,710
The dot dot dot colors then means take a look at the colors array.

29
00:02:21,930 --> 00:02:26,980
Take all the elements inside there and add them inside of this new Array.

30
00:02:27,000 --> 00:02:29,520
Now that does not remove anything out of colors.

31
00:02:29,520 --> 00:02:35,040
It's not a destructive operation using this dot dot dot just says take a copy of everything inside that

32
00:02:35,040 --> 00:02:38,090
array and add it into this new one right here.

33
00:02:38,220 --> 00:02:44,880
And then after that we're going to add in a new entry by calling Random r G.B. so the result should

34
00:02:44,880 --> 00:02:50,280
be that we call set colors with a brand new array that has everything from the original colors variable

35
00:02:50,280 --> 00:02:54,210
right here and our brand new one okay.

36
00:02:54,220 --> 00:03:00,190
And that should be at so far right now rather than focusing on how we can somehow make use of that array

37
00:03:00,190 --> 00:03:02,160
of colors by showing a bunch of different views.

38
00:03:02,260 --> 00:03:08,320
Let's instead just do a console log of colors and see how that array changes over time.

39
00:03:08,390 --> 00:03:11,860
It's all save this file and we'll do a quick test.

40
00:03:11,900 --> 00:03:13,240
I'll go to color demo.

41
00:03:13,490 --> 00:03:15,400
We see one color automatically remember.

42
00:03:15,410 --> 00:03:21,860
That's because we have a hardcoded view inside of here and I'll tap on add a color like once twice and

43
00:03:21,860 --> 00:03:27,710
three times you'll notice that every time we click on that button the square right there changes.

44
00:03:27,710 --> 00:03:28,790
Why is that.

45
00:03:28,790 --> 00:03:34,610
Well remember anytime we change a state variable in any way like with set colors right here we're going

46
00:03:34,610 --> 00:03:40,310
to rerun this entire component when this can tie entire component reruns.

47
00:03:40,310 --> 00:03:43,680
That means that we update this view element as well.

48
00:03:43,820 --> 00:03:48,660
And so that view element it's a brand new randomly generated color.

49
00:03:48,740 --> 00:03:53,810
So that's why we're seeing that background color change every single time we tap that button.

50
00:03:53,810 --> 00:03:55,650
Now let's also take a look at the console log.

51
00:03:55,650 --> 00:03:57,340
We should see inside of our terminal.

52
00:03:57,500 --> 00:03:59,440
So I'll flip back over my terminal.

53
00:03:59,450 --> 00:04:00,570
Here we go.

54
00:04:00,710 --> 00:04:02,230
And this looks pretty good to me.

55
00:04:02,240 --> 00:04:03,810
So we've got an empty array.

56
00:04:03,830 --> 00:04:06,130
That's our starting initial value.

57
00:04:06,170 --> 00:04:11,470
We then tapped on the button one time and we added in a new color string to our array.

58
00:04:11,540 --> 00:04:16,340
We then tapped it a second time and we got a second color and we tapped it a third time and got a third

59
00:04:16,340 --> 00:04:18,720
color added in as well.

60
00:04:18,740 --> 00:04:19,970
So this is perfect.

61
00:04:19,970 --> 00:04:24,890
We are now tracking some piece of data or some collection of data I suppose in this case an array of

62
00:04:24,890 --> 00:04:27,320
colors that's changing over time.

63
00:04:27,320 --> 00:04:32,420
And as we just saw every time we change that piece of data our component re-enters itself.

64
00:04:32,420 --> 00:04:37,160
And so it updates the content on the screen now that we've got this array of colors right here.

65
00:04:37,160 --> 00:04:38,110
Let's take a quick pause.

66
00:04:38,120 --> 00:04:43,490
When we come back the next video we're going to render a list of all these different colors by generating

67
00:04:43,550 --> 00:04:45,100
a list of different views.

68
00:04:45,170 --> 00:04:47,180
So quick pause and I'll see you in just a minute.