In the last section we got started with our text input here and we imported Tulsa's style on it and
just verified that yup we can type something in the simulator if we want to.
One thing that's kind of been bugging me here from the last section is we're not using this view tag
anymore on our import for rock native son is going to be a little bit of cleanup.
I'm just going to kill that tag because we're not using it.
OK everything's Miller red on the screen.
Can't stand the red.
All right.
So we need to focus on making sure that we can somehow receive text from the user with this text input
now.
Yes.
Right now we can type into this thing but how do we actually get access to that text inside of this
text input right from inside of our input.
How do we pull some text out of that text input.
That's the goal of what we want to do.
That's the goal of this section.
We're going to figure out how to receive text from that text input.
So I got to tell you right now this is definitely one of the really weird parts of react and react native.
So the plan here how we're going to tackle this.
We're going to toss up a bunch of code on the screen and they're going to talk about exactly how it
works.
OK.
So we're going to do this in kind of reverse order of normal.
We're going to toss the code up on screen and then figure out how it works.
So we're going do a little bit of typing without quite knowing what's going on.
The first thing to do is I'm going to add some state to my component remember state is what we use to
deal with feedback from the user or react to user events in some fashion.
I'm going to initialize my state object to have a single property of text and the single property of
text will start off as an empty string next inside of my text input.
I'm going to add another prop in here and again will I guarantee you we're going to come back and discuss
how this stuff is working.
I'm going out on another project of on change text and then to this product right here we'll pass a
fat arrow function.
It's going to be called we're going to be called with one argument which is going to be text.
And as soon as this thing is called we're going to set our state with that text.
Keep in mind here I'm going to use the condensed 6 syntax for this object right here.
So I have just text but that will get expanded to look like so.
So I'm setting the property text with the text that this function got called with.
All right.
Now one less one less weird thing and then I promise you we're going to talk about what's going on.
I'm going out on a nother prop here of value.
And you said equal to this state DOT text.
OK.
So all right.
Couple of changes three changes in total I added in state.
I added in and on change text callback here and I also added in a prop of value that we passed to the
text input.
So I'm now going to refresh my simulator.
Let's just see hey is anything different dating change here and.
Well ok.
I mean it looks completely identical.
What the heck is different right.
What is different about what we just did it sure feels like something is different but what do we actually
do.
Let's take a quick break and then come back and discuss exactly the purpose of using state with this
text input here.