1
00:00:00,910 --> 00:00:06,660
In the last section we got started with our text input here and we imported Tulsa's style on it and

2
00:00:06,660 --> 00:00:11,080
just verified that yup we can type something in the simulator if we want to.

3
00:00:11,100 --> 00:00:15,150
One thing that's kind of been bugging me here from the last section is we're not using this view tag

4
00:00:15,150 --> 00:00:19,200
anymore on our import for rock native son is going to be a little bit of cleanup.

5
00:00:19,230 --> 00:00:21,510
I'm just going to kill that tag because we're not using it.

6
00:00:21,730 --> 00:00:24,050
OK everything's Miller red on the screen.

7
00:00:24,060 --> 00:00:27,140
Can't stand the red.

8
00:00:27,230 --> 00:00:27,520
All right.

9
00:00:27,520 --> 00:00:33,010
So we need to focus on making sure that we can somehow receive text from the user with this text input

10
00:00:33,610 --> 00:00:34,010
now.

11
00:00:34,030 --> 00:00:34,990
Yes.

12
00:00:35,050 --> 00:00:41,290
Right now we can type into this thing but how do we actually get access to that text inside of this

13
00:00:41,290 --> 00:00:43,660
text input right from inside of our input.

14
00:00:43,660 --> 00:00:46,780
How do we pull some text out of that text input.

15
00:00:46,780 --> 00:00:47,980
That's the goal of what we want to do.

16
00:00:47,980 --> 00:00:49,140
That's the goal of this section.

17
00:00:49,150 --> 00:00:52,880
We're going to figure out how to receive text from that text input.

18
00:00:53,290 --> 00:00:58,250
So I got to tell you right now this is definitely one of the really weird parts of react and react native.

19
00:00:58,450 --> 00:01:01,100
So the plan here how we're going to tackle this.

20
00:01:01,210 --> 00:01:05,260
We're going to toss up a bunch of code on the screen and they're going to talk about exactly how it

21
00:01:05,320 --> 00:01:05,940
works.

22
00:01:05,980 --> 00:01:06,270
OK.

23
00:01:06,280 --> 00:01:09,750
So we're going to do this in kind of reverse order of normal.

24
00:01:09,760 --> 00:01:13,870
We're going to toss the code up on screen and then figure out how it works.

25
00:01:13,930 --> 00:01:17,590
So we're going do a little bit of typing without quite knowing what's going on.

26
00:01:17,590 --> 00:01:23,410
The first thing to do is I'm going to add some state to my component remember state is what we use to

27
00:01:23,410 --> 00:01:28,830
deal with feedback from the user or react to user events in some fashion.

28
00:01:28,840 --> 00:01:35,740
I'm going to initialize my state object to have a single property of text and the single property of

29
00:01:35,740 --> 00:01:41,710
text will start off as an empty string next inside of my text input.

30
00:01:41,800 --> 00:01:46,570
I'm going to add another prop in here and again will I guarantee you we're going to come back and discuss

31
00:01:46,570 --> 00:01:48,250
how this stuff is working.

32
00:01:48,250 --> 00:01:56,910
I'm going out on another project of on change text and then to this product right here we'll pass a

33
00:01:56,910 --> 00:01:59,340
fat arrow function.

34
00:01:59,610 --> 00:02:04,810
It's going to be called we're going to be called with one argument which is going to be text.

35
00:02:05,240 --> 00:02:11,010
And as soon as this thing is called we're going to set our state with that text.

36
00:02:11,010 --> 00:02:15,550
Keep in mind here I'm going to use the condensed 6 syntax for this object right here.

37
00:02:15,570 --> 00:02:19,960
So I have just text but that will get expanded to look like so.

38
00:02:20,010 --> 00:02:26,080
So I'm setting the property text with the text that this function got called with.

39
00:02:26,130 --> 00:02:26,640
All right.

40
00:02:26,680 --> 00:02:31,360
Now one less one less weird thing and then I promise you we're going to talk about what's going on.

41
00:02:31,420 --> 00:02:34,640
I'm going out on a nother prop here of value.

42
00:02:34,720 --> 00:02:38,590
And you said equal to this state DOT text.

43
00:02:38,820 --> 00:02:39,160
OK.

44
00:02:39,190 --> 00:02:40,260
So all right.

45
00:02:40,300 --> 00:02:43,690
Couple of changes three changes in total I added in state.

46
00:02:44,170 --> 00:02:51,640
I added in and on change text callback here and I also added in a prop of value that we passed to the

47
00:02:51,640 --> 00:02:53,110
text input.

48
00:02:53,110 --> 00:02:55,420
So I'm now going to refresh my simulator.

49
00:02:55,450 --> 00:02:59,860
Let's just see hey is anything different dating change here and.

50
00:02:59,900 --> 00:03:01,480
Well ok.

51
00:03:01,480 --> 00:03:03,200
I mean it looks completely identical.

52
00:03:03,220 --> 00:03:05,810
What the heck is different right.

53
00:03:05,830 --> 00:03:09,400
What is different about what we just did it sure feels like something is different but what do we actually

54
00:03:09,400 --> 00:03:09,980
do.

55
00:03:10,270 --> 00:03:16,210
Let's take a quick break and then come back and discuss exactly the purpose of using state with this

56
00:03:16,210 --> 00:03:17,320
text input here.