In this video we're going to add in a new piece of state to our tech screen component since we're only
trying to track one variable here.
We're going to use the you state hook from react as opposed to the use reducer hook.
So at the very top right next to react I'm going to out inside of a set of curly brackets use state
then inside of tech screen.
I'm going to initialize a new piece of state.
I'll call it name because that's what we're supposed to be entering inside of here and I'll get my center
which I'll call set.
Name I'll then call you state on the other side and I'll provide an initial value of an empty string
like so.
So now we've got a actual piece of state right here and a way to change it.
So the piece of state we want to pass down into our text input and set its value directly.
In other words we want our text screen.
We want the parent to tell the child what its current value should be.
Even though that seems really weird and it seems like the text input already knows what the value should
be because we can type in there nonetheless a parent is going to tell the child what the current value
is.
So instead of a hardcoded value right you're going to delete that and replace it with a set of curly
brackets.
And inside there I'll say name like so so if we save this right now we essentially have a hardcoded
value for our text input.
And if you actually go back over to your text and put right now and try to type in here you're going
to see something really interesting.
We can't type in anything at all.
It appears that some text appears for like half a second but then it very quickly goes away.
So that's a side effect of using this value prop we are telling the text input exactly what its value
is.
And we have no opportunity right now.
There's actually no way to change its value so the text inputs value is hardcoded even if a user types
in here doesn't matter because 100 percent of the time the text inputs value is going to be empty string
so to change that we need to eventually have the ability to call our set name so we can update our state
caused this component to render and pass an updated value of name down into this value prop so on text
input.
I'm going to pass in on text or see me on change text.
There we go.
That's better.
We're gonna pass this thing.
A callback function so this callback function is going to be called with whatever new value a user types
inside of here.
So we might call that argument something like new text or new value whatever makes sense to you.
I'll go with new value for right now and inside the callback function we can call our center that's
going to update our piece of state.
Again remember anytime we update our state it will cause this component to re render when it renders
the new value will be present inside of our name variable right here.
We're then going to re render text input and pass in the new value.
So then the new value is going to appear on the screen even though it really was kind of visible before.
Right.
That's the weird part here.
Okay.
Let's do it inside of that callback function we'll call set name past in the new value like so.
And that's pretty much it.
So now we can save this if I go back to text demo I can once again type in here successfully it's now
the big difference is that now we've got this piece of state called name that we can make use of inside
this component as much as we please.
So again the whole issue here I can't repeat enough.
It's all about getting access to the data inside that text input even if it seems really weird it's
all about just making sure that our parent element doesn't try to inspect that child.
So now that we've got access to that variable right there that name variable we can now place a text
and put right here inside of it.
I'll say my name is and they'll print out the current value of name technically our original mockup
over here also showed enter name right there as a label.
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
this out so we'll go back to my text demo I'll enter in Steven and there we go.
It appears right away on the screen okay.
So that's pretty much it.
The pattern that you see right here we're going to utilize this pattern every last time we have a text
input doesn't matter when every time we show a text input we're always going to have some state variables
somewhere that we're shoving into that text input we're always going to add in the on change to text
prop we're always going to pass it a callback function that calls some setter or something similar that's
going to try to update that state value so you can essentially kind of copy this right here or just
make sure you hold onto this file for reference because again every time you show a text input we're
going to repeat these same steps.
OK.
So now we got this put together.
Let's take a pause right here and continue in the next video.