Okay.
In this video, I will show you how we can actually handle user input and will create a text input that
user can type in something and we'll capture that input and store it in our state.
So first thing first, I will do a little bit of cleanup here because it's, uh, looks very ugly here.
So I will remove the styles we had here.
And this is a much better.
So what I can do now is I have a few things here.
So instead of that button there, maybe I can move it here.
What I can do is I can do a text input
like this.
And also I need to make sure that I import that from React Native.
So I will do another one here, text input and then I will close it.
So what, what we need to put inside the in text input is a few things.
Actually.
This can be a self-closing tag.
We don't need to have it like this.
And then we put a few things inside.
So first thing will be value.
Value we can actually use whatever we have here.
So I can use a value name.
We can also have a placeholder.
We won't see it here because we will have a value from then, uh, this state.
So I can say type in your name.
So what I will have at the moment is I will have the value here.
And you can see here I have two Christian, one is the text style and another one is the input.
I can do a little bit of uh, style.
And actually another way to do a styles is inline styles.
You don't need to apply it here.
You can apply a styles already here.
So I could say height.
Of 40, but that need to be in a double curly braces.
The first one is to inject the.
JavaScript inside these tags and the second one is the object itself.
So I have a height and then 40 and then I can have more style scale.
So for example, back background color and then I can say, um, red.
So we have something ugly like this.
And, uh, so this is the text input here.
And I can actually, you can see wherever I click in this, the, the keyboard on the mobile device
is open and I can type in so I can use this one or I could type in something here on my keyboard, on
my computer.
Normally on the mobile device will have this option here, A y.
This is actually not changing because the way the react works.
So basically what we have is we assign the value name from our state and name is Christian.
So whatever we change something, it will come back to the initial value we have here.
So what we also need to do here, we need to have on text, on change text, and then we can have a
function too that will trigger.
So what we can do is we can, uh, do an arrow function here so we can have it a function in the, in
the, in this component or we can have it in inline here.
It doesn't really matter.
What we can do is we can do setname.
And then we can do value of text.
And then if I will type in something here, you can see both this and also my initial.
I just pick a very bad color here, so remove them because it's really hard to see something.
So I will remove this green there and then I can do margin bottom instead of.
So it will be easier to to see.
So what this is my this is my text here and this is my input.
So if I will change the input here.
You can see this one is changing because what I do is I change the state here and on change, text it,
change the state, and this state is actually reflected back in the text input.
So this is the way you can actually get the input from from a user.
What's the other options for getting some inputs from a user?
Another option will be a button.
So it will be capital button.
And then we also need to import.
And then actually this can be self closing tag as well.
And then what we can have here is we can have on press and that will be a function so we can do something
when we press that button and then we can do, for example, alert, That will be another option to
show you how actually react.
Native is handling things in a different way.
So alert is very intrusive on web, but it's actually very handy on mobile and you will see that in
a second.
So let's say you click the button.
So.
You click the button here and then when you also need to do text.
And that's supposed to be a title, not a text.
And you can see here I have a click me here.
So what we can actually do is we can concatenate our string and then it's like instead of maybe you,
what we can do is we can actually use our name.
So name plus click the button.
So if I will click it here, you can see Alert Christian, click the button.
And this is styling for typical styling for mobile device.
So it will be different on iOS, it will be different on Android, but it's more user friendly because
mobile users already get used to that kind of pop up.
So you can see you can have it something like this.
So you can click the button and actually we can fit some variables into this alert as well.
So if I will change this to.
Someone.
You can see someone click the button and this is the way you can actually handle user inputs.
We can have a text input here that will actually use with our state and then we have a button and then
we have a on press.
So things like this.
Making our application more interactive with the user and usually in the application you will have things
like this.
So either login or register or anything you would like to send to the database or create new record.
You will also need to use this text input and button for sure.