1
00:00:01,250 --> 00:00:04,520
We've now got our text and put visible and some necessary props on there.

2
00:00:04,520 --> 00:00:08,630
So let's figure out how we can actually read some text out of there and print it back up on the screen

3
00:00:08,690 --> 00:00:10,770
inside of our text screen element.

4
00:00:10,830 --> 00:00:15,890
Now before we do that we need to understand a little bit better how to handle text inputs with state

5
00:00:16,010 --> 00:00:17,260
in react.

6
00:00:17,390 --> 00:00:19,900
So this is where things are gonna get just a little bit weird.

7
00:00:19,910 --> 00:00:25,100
It's going to get a little bit unexpected just because well let me show you something right now I can

8
00:00:25,100 --> 00:00:29,470
select that text input I can write some text in there and everything is fine right.

9
00:00:29,480 --> 00:00:31,140
I see text appear.

10
00:00:31,370 --> 00:00:35,420
So it appears right now that out of the box the text input is a ok.

11
00:00:35,450 --> 00:00:37,560
And nothing about it needs to change.

12
00:00:37,670 --> 00:00:41,780
And I think you would agree with me in that regard it appears that our application right now is more

13
00:00:41,780 --> 00:00:48,170
or less working just fine but it turns out that our current implementation here is not really what we

14
00:00:48,170 --> 00:00:49,220
want.

15
00:00:49,240 --> 00:00:52,000
Let me show you a diagram and help you understand.

16
00:00:52,190 --> 00:00:52,460
OK.

17
00:00:52,490 --> 00:00:56,390
So this is essentially the component hierarchy that we have inside of our application right now or at

18
00:00:56,390 --> 00:00:57,740
least just the text screen.

19
00:00:58,310 --> 00:01:02,120
So we've got our text screen and it's showing a text input.

20
00:01:02,120 --> 00:01:07,130
I'm going to refer to this text input as input just so I can stop saying the word text all the time

21
00:01:07,220 --> 00:01:10,920
and confuse you as to whether I'm talking about touch screen or text input.

22
00:01:11,390 --> 00:01:17,410
So essentially our text screen is showing a input we can imagine right now that that input element has

23
00:01:17,410 --> 00:01:22,780
some state property tied to it maybe it's a piece of state called like current text.

24
00:01:22,900 --> 00:01:29,590
And when I type in a SDF we can kind of imagine that that state turns to a SDF remember state in react

25
00:01:29,590 --> 00:01:34,510
is used to track any variable that's going to change over time and whenever that variable changes we

26
00:01:34,510 --> 00:01:36,380
want our component to re render.

27
00:01:36,400 --> 00:01:41,280
So I think it's really not out of the realm of possibility to say that this text element right here

28
00:01:41,290 --> 00:01:48,130
that input element has some internal state tied to it that at present we can't really see now just you

29
00:01:48,130 --> 00:01:52,360
know in reality that text input doesn't really have any state but let's just imagine that for right

30
00:01:52,360 --> 00:01:53,300
now.

31
00:01:53,380 --> 00:01:58,380
So here's the issue here's where things start to get kind of awkward what would happen if we wanted

32
00:01:58,410 --> 00:02:02,510
our tech screen to somehow inspect the current value inside that text input.

33
00:02:03,090 --> 00:02:09,510
Well that would encourage our parent element to kind of reach on down to a child and tried to inspect

34
00:02:09,600 --> 00:02:12,180
some of the different properties that it currently has.

35
00:02:12,180 --> 00:02:16,710
So we can kind of imagine if the texturing wants to know what the current text inputs value is it might

36
00:02:16,710 --> 00:02:21,360
say well on the text screen I'm going to go and see what my child is up to and I'm going to pull its

37
00:02:21,360 --> 00:02:24,230
value of state out and I'm going to make use of it somehow.

38
00:02:24,240 --> 00:02:28,840
So this is not what we want to do with react in like any regard ever.

39
00:02:29,010 --> 00:02:35,850
In no situation do we ever want to have a parent element reach down directly into a child and try to

40
00:02:35,850 --> 00:02:39,760
inspect that child's state or any data tied to it.

41
00:02:39,780 --> 00:02:44,880
There are some scenarios where that is permissible and it's something that we want to do when it's extremely

42
00:02:44,880 --> 00:02:45,330
rare.

43
00:02:45,390 --> 00:02:50,010
And it's definitely not really what we want to do around handling an input like this.

44
00:02:50,010 --> 00:02:55,230
So again the problem with this scenario is that we don't want the parent to reach down and try to inspect

45
00:02:55,290 --> 00:03:02,350
some properties that this text input has so instead we're going to kind of do something this is we're

46
00:03:02,360 --> 00:03:07,130
like I said it's going to get a little bit weird it's going to seem unnecessary but it's a much more

47
00:03:07,370 --> 00:03:10,710
react way so to speak of approaching this problem.

48
00:03:10,730 --> 00:03:16,210
So here's what we're going to do instead we're going to make sure that our text screen element is going

49
00:03:16,210 --> 00:03:21,790
to hold a piece of state that represents what is currently inside of that input.

50
00:03:21,790 --> 00:03:26,920
Then every single time that we render our text screen we're gonna show that input element and we're

51
00:03:26,920 --> 00:03:29,440
gonna pass in two props to it.

52
00:03:29,440 --> 00:03:34,750
We're gonna pass in a prop called value and that's going to be equal to the current text that's inside

53
00:03:35,050 --> 00:03:36,750
of our piece of state right here.

54
00:03:37,400 --> 00:03:43,160
The text input is programmed to automatically receive a prop called value if we pass in that prop and

55
00:03:43,160 --> 00:03:44,250
it is a string.

56
00:03:44,300 --> 00:03:48,920
The input is going to show that value directly on the screen in the words it's going to print out that

57
00:03:48,920 --> 00:03:50,750
value inside the text input.

58
00:03:50,780 --> 00:03:55,280
We can actually test that out right away very easily without even really really worrying have about

59
00:03:55,280 --> 00:03:57,680
having to add in state or anything like that.

60
00:03:57,770 --> 00:04:02,810
If we flip back over to our text input right away I can add in a value prop right here and I can put

61
00:04:02,820 --> 00:04:04,230
in any old value into it.

62
00:04:04,310 --> 00:04:06,530
Actually let's do something different than my usual gibberish.

63
00:04:06,530 --> 00:04:12,280
I'll just say hi there like so I can save that look back over and I see the text.

64
00:04:12,280 --> 00:04:17,780
Hi there appear so again if we put in a value prop the text to input is going to show that on the screen

65
00:04:18,950 --> 00:04:20,300
that's step one.

66
00:04:20,300 --> 00:04:24,980
The other thing that we're going to pass from our tech screen down into the text input is a callback

67
00:04:24,980 --> 00:04:27,880
function under the prop name on change.

68
00:04:27,890 --> 00:04:34,430
Text the text input is programmed to receive this prop if we pass in a function under the prop name

69
00:04:34,430 --> 00:04:38,870
specifically on change text that callback function will be invoked.

70
00:04:38,900 --> 00:04:42,010
Anytime a user types inside of that text input.

71
00:04:42,200 --> 00:04:45,430
So inside they're inside of that prop or the function we pass to it.

72
00:04:45,560 --> 00:04:51,530
We can provide a reference to our setter function and say essentially anytime a user changes the text

73
00:04:51,530 --> 00:04:56,210
inside there we want to update our state variable inside of text screen.

74
00:04:56,210 --> 00:04:59,190
Remember what happens any time we update a state variable.

75
00:04:59,410 --> 00:05:04,340
Anytime that happens we're going to automatically have our text screen element re rendered.

76
00:05:04,340 --> 00:05:08,420
That means that we're going to then ratio or rearrange our text input as well.

77
00:05:08,480 --> 00:05:14,090
And at that point in time we're going to pass down a new value on the value prop it will be the updated

78
00:05:14,090 --> 00:05:21,930
text of whatever the user just entered in so the reason this is weird as I'm saying here is that right

79
00:05:21,960 --> 00:05:24,210
now are text input is working just fine.

80
00:05:24,210 --> 00:05:28,170
It appears we can write stuff in there and there's no issue whatsoever.

81
00:05:28,170 --> 00:05:33,680
But again it all comes down to how we tried to access the text inside there with react.

82
00:05:33,690 --> 00:05:39,480
We do not have a parent reach down into a child element instead if we ever want to communicate data

83
00:05:39,690 --> 00:05:45,990
from a child up to a parent we have to use this callback system where we pass a prop down that's a callback

84
00:05:45,990 --> 00:05:51,510
function and when something happens inside that child it will call that callback until the parent that

85
00:05:51,510 --> 00:05:52,870
something just occurred.

86
00:05:52,890 --> 00:05:57,260
That's how we communicate from a child up to a parent.

87
00:05:57,370 --> 00:05:59,270
OK so let's now take a quick pause right here.

88
00:05:59,280 --> 00:06:02,620
Now that we understand more or less verbally what's going on here.

89
00:06:02,830 --> 00:06:07,000
When come back the next video we're going to add in some code to make sure that we can actually track

90
00:06:07,030 --> 00:06:10,090
the current text inside that input using a state variable.