1
00:00:00,930 --> 00:00:06,430
In the last section we added a bunch of code to our blog and form all revolving around States and this

2
00:00:06,430 --> 00:00:08,720
mystery property here that we called text.

3
00:00:08,920 --> 00:00:13,630
So I pull up a diagram now and we're going to do a shot at trying to figure out what the heck is going

4
00:00:13,630 --> 00:00:15,690
on here with this thing.

5
00:00:15,760 --> 00:00:17,320
So here's our diagram.

6
00:00:17,320 --> 00:00:20,650
So this diagram is meant to represent a cycle of sorts.

7
00:00:20,650 --> 00:00:22,880
So we're going to start off the top left hand side.

8
00:00:23,110 --> 00:00:26,950
We're going to go down there and come back up to the top 10.

9
00:00:27,100 --> 00:00:29,470
So everything starts off with a text input.

10
00:00:29,470 --> 00:00:32,040
We rendered it to art inside of our component.

11
00:00:32,050 --> 00:00:34,570
It shows up on the screen it is just kind of there.

12
00:00:34,810 --> 00:00:39,670
Once the rent is rendered and it's visible on the screen the text input just sits there and it doesn't

13
00:00:39,670 --> 00:00:45,340
actually do anything until the user actually taps in it and then starts to enter some text.

14
00:00:45,550 --> 00:00:51,130
So until the user enters some text the text input just sitting there.

15
00:00:51,130 --> 00:00:55,350
Now when a user enters some text some really interesting stuff starts to happen.

16
00:00:56,910 --> 00:01:01,750
Whenever the user enters text that onchange text event handlers called.

17
00:01:01,770 --> 00:01:05,460
So he added a prop to that text and put on change text.

18
00:01:05,460 --> 00:01:10,940
And we passed it a function that function gets called whenever a user typed something into that input.

19
00:01:11,010 --> 00:01:13,770
OK and it gets called with a text that the user just added.

20
00:01:14,040 --> 00:01:16,080
So it's not the weirdest thing in the world right.

21
00:01:16,080 --> 00:01:21,870
We added a callback function this federal function right here is going to be called whenever the user

22
00:01:21,900 --> 00:01:28,230
types inside that thing and it gets called with a text that the user outed.

23
00:01:28,230 --> 00:01:35,400
So then after that onchange tests on change text event is called We merely call set state with the new

24
00:01:35,400 --> 00:01:36,170
text.

25
00:01:36,420 --> 00:01:39,090
So we take that text and it calls that state with it.

26
00:01:39,090 --> 00:01:44,370
So now the current value of that text and put it like as far as the user is concerned as far as we're

27
00:01:44,370 --> 00:01:47,210
concerned is this state DOT text.

28
00:01:47,220 --> 00:01:55,700
That is what the value of the input is next because we called Set state the component immediately renders.

29
00:01:55,910 --> 00:02:00,890
Don't forget that stuff whenever we call said state the component immediately renders.

30
00:02:00,950 --> 00:02:05,660
And now here is where the magic happens when the text input re renders.

31
00:02:05,690 --> 00:02:05,990
Right.

32
00:02:05,980 --> 00:02:13,970
Like when our render method is executed again the text input is created again and when it renders we

33
00:02:13,970 --> 00:02:18,990
tell it that its value should be equal to this dot state DOT text.

34
00:02:19,250 --> 00:02:21,150
So we recreate the text input.

35
00:02:21,170 --> 00:02:26,000
We placed it on the screen and we immediately tell it that it's values this dot statement text.

36
00:02:26,000 --> 00:02:31,520
And so we start off all the way with the cycle again all the way back up to the top with the text input.

37
00:02:31,640 --> 00:02:37,880
So the very critical part here the really important part is that whenever a user enters some text into

38
00:02:37,880 --> 00:02:44,130
that input the text input is not responsible for knowing what its value is.

39
00:02:44,140 --> 00:02:47,010
It has no idea what its value is.

40
00:02:47,440 --> 00:02:54,300
Instead we save the value that the user entered to this state and then whenever the text input reminders

41
00:02:54,340 --> 00:02:58,500
we say hey text input you're not going to tell us what your value is.

42
00:02:58,510 --> 00:03:00,850
You have no idea what your value is.

43
00:03:00,850 --> 00:03:08,080
We are going to tell you very distinctly your value like the the text you should contain should be coming

44
00:03:08,080 --> 00:03:10,360
from this dot state DOT text.

45
00:03:10,530 --> 00:03:11,030
OK.

46
00:03:11,110 --> 00:03:15,850
So I know this might seem like a really crazy town way of handling text input.

47
00:03:15,850 --> 00:03:17,890
I don't disagree with you.

48
00:03:18,010 --> 00:03:23,470
To be honest it's very very much dissimilar from how just about every other javascript framework does

49
00:03:23,470 --> 00:03:24,250
this right.

50
00:03:24,310 --> 00:03:28,360
Every other javascript framework says let's put a text input on the screen.

51
00:03:28,480 --> 00:03:29,760
When the user types something in.

52
00:03:29,770 --> 00:03:34,810
Great just let them do it and then eventually when the user tries to submit the form let's reach into

53
00:03:34,810 --> 00:03:37,060
the text input and pull the value out.

54
00:03:37,090 --> 00:03:39,820
So re-activated is completely different in that regard.

55
00:03:39,940 --> 00:03:45,700
We are not letting the text exist inside the text input the text exists as a piece of state.

56
00:03:45,760 --> 00:03:48,550
On our component that's how it works.

57
00:03:48,580 --> 00:03:53,680
The benefit to this is that we always know exactly what the value of that text input is.

58
00:03:53,680 --> 00:03:57,110
We can just reference this dot state DOT text.

59
00:03:57,120 --> 00:04:02,770
Now maybe that doesn't sound like the greatest benefit in the world but believe me as soon as we start

60
00:04:02,770 --> 00:04:07,390
to try to pull the text of this thing and try and make this into reusable component blah blah blah blah

61
00:04:07,390 --> 00:04:08,180
blah.

62
00:04:08,350 --> 00:04:13,720
All these benefits are going to come together and you're going to realize that holding states or holding

63
00:04:13,720 --> 00:04:18,650
text outside of the text input actually has a fair number of benefits.

64
00:04:19,330 --> 00:04:19,680
OK.

65
00:04:19,690 --> 00:04:23,520
So this has been kind of a heavy little discussion talking about how these text inputs work.

66
00:04:23,680 --> 00:04:29,490
So let's take a quick break and then come back and turn this text input right here into a reusable component.