1
00:00:01,030 --> 00:00:06,080
In this video we're going to add in a new piece of state to our tech screen component since we're only

2
00:00:06,080 --> 00:00:07,700
trying to track one variable here.

3
00:00:07,700 --> 00:00:12,290
We're going to use the you state hook from react as opposed to the use reducer hook.

4
00:00:12,320 --> 00:00:18,110
So at the very top right next to react I'm going to out inside of a set of curly brackets use state

5
00:00:19,260 --> 00:00:20,900
then inside of tech screen.

6
00:00:20,970 --> 00:00:23,450
I'm going to initialize a new piece of state.

7
00:00:23,730 --> 00:00:29,010
I'll call it name because that's what we're supposed to be entering inside of here and I'll get my center

8
00:00:29,100 --> 00:00:30,030
which I'll call set.

9
00:00:30,030 --> 00:00:35,320
Name I'll then call you state on the other side and I'll provide an initial value of an empty string

10
00:00:35,320 --> 00:00:37,060
like so.

11
00:00:37,060 --> 00:00:42,100
So now we've got a actual piece of state right here and a way to change it.

12
00:00:42,160 --> 00:00:47,690
So the piece of state we want to pass down into our text input and set its value directly.

13
00:00:47,740 --> 00:00:50,080
In other words we want our text screen.

14
00:00:50,080 --> 00:00:53,970
We want the parent to tell the child what its current value should be.

15
00:00:54,040 --> 00:00:58,360
Even though that seems really weird and it seems like the text input already knows what the value should

16
00:00:58,360 --> 00:01:03,280
be because we can type in there nonetheless a parent is going to tell the child what the current value

17
00:01:03,280 --> 00:01:04,560
is.

18
00:01:04,650 --> 00:01:08,440
So instead of a hardcoded value right you're going to delete that and replace it with a set of curly

19
00:01:08,440 --> 00:01:08,920
brackets.

20
00:01:08,920 --> 00:01:15,530
And inside there I'll say name like so so if we save this right now we essentially have a hardcoded

21
00:01:15,580 --> 00:01:17,420
value for our text input.

22
00:01:17,560 --> 00:01:21,280
And if you actually go back over to your text and put right now and try to type in here you're going

23
00:01:21,280 --> 00:01:22,990
to see something really interesting.

24
00:01:22,990 --> 00:01:24,920
We can't type in anything at all.

25
00:01:25,120 --> 00:01:29,920
It appears that some text appears for like half a second but then it very quickly goes away.

26
00:01:29,920 --> 00:01:35,740
So that's a side effect of using this value prop we are telling the text input exactly what its value

27
00:01:35,740 --> 00:01:36,580
is.

28
00:01:36,580 --> 00:01:38,430
And we have no opportunity right now.

29
00:01:38,440 --> 00:01:45,190
There's actually no way to change its value so the text inputs value is hardcoded even if a user types

30
00:01:45,190 --> 00:01:51,340
in here doesn't matter because 100 percent of the time the text inputs value is going to be empty string

31
00:01:53,330 --> 00:01:59,360
so to change that we need to eventually have the ability to call our set name so we can update our state

32
00:01:59,570 --> 00:02:06,420
caused this component to render and pass an updated value of name down into this value prop so on text

33
00:02:06,420 --> 00:02:06,860
input.

34
00:02:06,900 --> 00:02:12,510
I'm going to pass in on text or see me on change text.

35
00:02:12,510 --> 00:02:13,020
There we go.

36
00:02:13,050 --> 00:02:13,770
That's better.

37
00:02:14,520 --> 00:02:15,350
We're gonna pass this thing.

38
00:02:15,360 --> 00:02:21,450
A callback function so this callback function is going to be called with whatever new value a user types

39
00:02:21,450 --> 00:02:22,600
inside of here.

40
00:02:22,740 --> 00:02:29,190
So we might call that argument something like new text or new value whatever makes sense to you.

41
00:02:29,220 --> 00:02:34,960
I'll go with new value for right now and inside the callback function we can call our center that's

42
00:02:34,960 --> 00:02:36,570
going to update our piece of state.

43
00:02:36,670 --> 00:02:42,010
Again remember anytime we update our state it will cause this component to re render when it renders

44
00:02:42,280 --> 00:02:46,240
the new value will be present inside of our name variable right here.

45
00:02:46,240 --> 00:02:51,270
We're then going to re render text input and pass in the new value.

46
00:02:51,370 --> 00:02:57,150
So then the new value is going to appear on the screen even though it really was kind of visible before.

47
00:02:57,160 --> 00:02:57,490
Right.

48
00:02:57,490 --> 00:02:59,180
That's the weird part here.

49
00:02:59,350 --> 00:02:59,620
Okay.

50
00:02:59,660 --> 00:03:06,170
Let's do it inside of that callback function we'll call set name past in the new value like so.

51
00:03:06,440 --> 00:03:07,550
And that's pretty much it.

52
00:03:08,330 --> 00:03:14,360
So now we can save this if I go back to text demo I can once again type in here successfully it's now

53
00:03:14,360 --> 00:03:19,160
the big difference is that now we've got this piece of state called name that we can make use of inside

54
00:03:19,160 --> 00:03:21,670
this component as much as we please.

55
00:03:21,680 --> 00:03:24,350
So again the whole issue here I can't repeat enough.

56
00:03:24,410 --> 00:03:30,290
It's all about getting access to the data inside that text input even if it seems really weird it's

57
00:03:30,350 --> 00:03:35,620
all about just making sure that our parent element doesn't try to inspect that child.

58
00:03:35,730 --> 00:03:40,490
So now that we've got access to that variable right there that name variable we can now place a text

59
00:03:40,490 --> 00:03:43,200
and put right here inside of it.

60
00:03:43,210 --> 00:03:50,630
I'll say my name is and they'll print out the current value of name technically our original mockup

61
00:03:50,630 --> 00:03:53,720
over here also showed enter name right there as a label.

62
00:03:53,750 --> 00:04:03,180
So I'll just put that in above the text input as well text and we'll say enter name and Okay let's test

63
00:04:03,180 --> 00:04:09,090
this out so we'll go back to my text demo I'll enter in Steven and there we go.

64
00:04:09,110 --> 00:04:11,930
It appears right away on the screen okay.

65
00:04:11,970 --> 00:04:13,100
So that's pretty much it.

66
00:04:13,430 --> 00:04:18,470
The pattern that you see right here we're going to utilize this pattern every last time we have a text

67
00:04:18,470 --> 00:04:23,960
input doesn't matter when every time we show a text input we're always going to have some state variables

68
00:04:23,960 --> 00:04:29,600
somewhere that we're shoving into that text input we're always going to add in the on change to text

69
00:04:29,600 --> 00:04:35,360
prop we're always going to pass it a callback function that calls some setter or something similar that's

70
00:04:35,360 --> 00:04:40,970
going to try to update that state value so you can essentially kind of copy this right here or just

71
00:04:40,970 --> 00:04:45,510
make sure you hold onto this file for reference because again every time you show a text input we're

72
00:04:45,510 --> 00:04:47,820
going to repeat these same steps.

73
00:04:47,830 --> 00:04:48,050
OK.

74
00:04:48,080 --> 00:04:49,110
So now we got this put together.

75
00:04:49,130 --> 00:04:51,320
Let's take a pause right here and continue in the next video.