We've now got our text and put visible and some necessary props on there.
So let's figure out how we can actually read some text out of there and print it back up on the screen
inside of our text screen element.
Now before we do that we need to understand a little bit better how to handle text inputs with state
in react.
So this is where things are gonna get just a little bit weird.
It's going to get a little bit unexpected just because well let me show you something right now I can
select that text input I can write some text in there and everything is fine right.
I see text appear.
So it appears right now that out of the box the text input is a ok.
And nothing about it needs to change.
And I think you would agree with me in that regard it appears that our application right now is more
or less working just fine but it turns out that our current implementation here is not really what we
want.
Let me show you a diagram and help you understand.
OK.
So this is essentially the component hierarchy that we have inside of our application right now or at
least just the text screen.
So we've got our text screen and it's showing a text input.
I'm going to refer to this text input as input just so I can stop saying the word text all the time
and confuse you as to whether I'm talking about touch screen or text input.
So essentially our text screen is showing a input we can imagine right now that that input element has
some state property tied to it maybe it's a piece of state called like current text.
And when I type in a SDF we can kind of imagine that that state turns to a SDF remember state in react
is used to track any variable that's going to change over time and whenever that variable changes we
want our component to re render.
So I think it's really not out of the realm of possibility to say that this text element right here
that input element has some internal state tied to it that at present we can't really see now just you
know in reality that text input doesn't really have any state but let's just imagine that for right
now.
So here's the issue here's where things start to get kind of awkward what would happen if we wanted
our tech screen to somehow inspect the current value inside that text input.
Well that would encourage our parent element to kind of reach on down to a child and tried to inspect
some of the different properties that it currently has.
So we can kind of imagine if the texturing wants to know what the current text inputs value is it might
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
value of state out and I'm going to make use of it somehow.
So this is not what we want to do with react in like any regard ever.
In no situation do we ever want to have a parent element reach down directly into a child and try to
inspect that child's state or any data tied to it.
There are some scenarios where that is permissible and it's something that we want to do when it's extremely
rare.
And it's definitely not really what we want to do around handling an input like this.
So again the problem with this scenario is that we don't want the parent to reach down and try to inspect
some properties that this text input has so instead we're going to kind of do something this is we're
like I said it's going to get a little bit weird it's going to seem unnecessary but it's a much more
react way so to speak of approaching this problem.
So here's what we're going to do instead we're going to make sure that our text screen element is going
to hold a piece of state that represents what is currently inside of that input.
Then every single time that we render our text screen we're gonna show that input element and we're
gonna pass in two props to it.
We're gonna pass in a prop called value and that's going to be equal to the current text that's inside
of our piece of state right here.
The text input is programmed to automatically receive a prop called value if we pass in that prop and
it is a string.
The input is going to show that value directly on the screen in the words it's going to print out that
value inside the text input.
We can actually test that out right away very easily without even really really worrying have about
having to add in state or anything like that.
If we flip back over to our text input right away I can add in a value prop right here and I can put
in any old value into it.
Actually let's do something different than my usual gibberish.
I'll just say hi there like so I can save that look back over and I see the text.
Hi there appear so again if we put in a value prop the text to input is going to show that on the screen
that's step one.
The other thing that we're going to pass from our tech screen down into the text input is a callback
function under the prop name on change.
Text the text input is programmed to receive this prop if we pass in a function under the prop name
specifically on change text that callback function will be invoked.
Anytime a user types inside of that text input.
So inside they're inside of that prop or the function we pass to it.
We can provide a reference to our setter function and say essentially anytime a user changes the text
inside there we want to update our state variable inside of text screen.
Remember what happens any time we update a state variable.
Anytime that happens we're going to automatically have our text screen element re rendered.
That means that we're going to then ratio or rearrange our text input as well.
And at that point in time we're going to pass down a new value on the value prop it will be the updated
text of whatever the user just entered in so the reason this is weird as I'm saying here is that right
now are text input is working just fine.
It appears we can write stuff in there and there's no issue whatsoever.
But again it all comes down to how we tried to access the text inside there with react.
We do not have a parent reach down into a child element instead if we ever want to communicate data
from a child up to a parent we have to use this callback system where we pass a prop down that's a callback
function and when something happens inside that child it will call that callback until the parent that
something just occurred.
That's how we communicate from a child up to a parent.
OK so let's now take a quick pause right here.
Now that we understand more or less verbally what's going on here.
When come back the next video we're going to add in some code to make sure that we can actually track
the current text inside that input using a state variable.