Managing State and Text Inputs in React

Alright then gang so now we've seen how we can use state inside a component using the use state hook Now what I'd like to do is add in a text input field So a user can type in something into that input field and then we can take that value and update our state With the value that they provide okay, so first of all we need to use a component called text input And we need to import that up here at the top, so I'm going to get rid of button because we don't need that anymore and instead, import text, input like so. Now, you'll already see that I've created two pieces of state. One of them, name and set name, is equal to use state, and then we have a name of Sean. And then the next line is age and set age, and that's equal to 30 to begin with. So at the bottom down here, what we're doing is just outputting those two variables, name and age, and we can see name Sean age 30. So what I'd like to do now is add a text input field for each one of these things right here So two input fields in total and a user can type into those input fields to update those two values So first of all, I'm going to do a text component This is just going to be for a label for the first text input and it will say enter name Like so and then underneath that I'm going to do a text input. So we imported that it's just text Input like so and it's a self closing tag So let's first of all save this and take a look at what this looks like on the screen over here So we can see enter name at the top, but this down here this input field. We can't really see It's just a blank space. However, if I click into it, we can see the cursor and the keyboard pop up So it is there. However, we can't really see it So what I'm going to do is add a style prop to this and set it equal to styles Then we'll call this style input. So dot input and let's create that down here So input and that will be an object and this is just going to have a few simple different properties So first of all border width and that is going to be one because by default it doesn't have a border Also, we want a border color and that is going to be 777 so kind of like a deep gray then I'm going to give this a bit of padding which is 8 pixels margin which is 10 pixels to bring it away from these two text lines and then also a width of 200 pixels So if I save this now We should see something that looks a bit more like a text input over here awesome And if we click it we can see the cursor and we can type stuff in there now at the minute when we do this Nothing is happening. We're not taking that value and doing anything with it. So I'd like to do that, but first of all, let me show you something else I can also add a placeholder into this text input as well And we can do that by adding a placeholder prop on the text input Now what I'm going to do is format this a little bit differently. I'm going to bring this down to the next line Otherwise, we're going to have loads of props going over and out of the screen. So I'm just going to stack them instead So first of all, we have the style then I'm going to do a placeholder. So placeholder I'm gonna set that equal to a string and I'll just say eg John Doe Okay, because this is a name input. So if I save that now, we should see that placeholder Inside the text input there it is in faint gray if I click it and start typing it deletes that and replaces it with whatever I type awesome. So now we have that placeholder. We have the style what I'd like to do is detect Whenever the value changes, whenever a user types a new character inside this field, I want to then take the current value that's inside the field and I want to update our state, the name, with that new value. So to do this, we need some kind of event listener. So, you know, like on the button, we have the on press prop. Well, on an input field, we can have on change text. So whenever the text changes inside the input. Then it's going to fire some kind of function in here now We could externalize it up here like we did before but this time i'm just going to do it in line inside an anonymous function Because it's just going to be a one line statement. So all we're going to do is call set Name, which is the function up here to set the state of this and we're going to pass in a new value And that value is going to be whatever a user types in whatever the current value inside here is now When we pass a function to onChangeText, that anonymous function or whatever function we reference here automatically takes in the value inside. The text field at that moment in time so we get access to what the user has typed in and when we set name we can Pass in that current value into that function. So we're updating the state So if I save this now then hopefully when it reloads I can type in something now watch the name change Down here as I type because every time the text changes in here We run this function and we update the name using set name Since we're outputting the name down here and it's been updated it should update in real time over here as well to reflect that change So I'm going to change this to Mario and as a type you can see it changing at the bottom as well Awesome, so it's updating the state with whatever I type in to the text input And this is really good because if you have a form in the future for logging in or signing up You can gather all of the information from a user and store in some local state and then take all of that data and make a request to whatever server you need to to sign that user up. Okay, so it's a good way to track what a user is typing into these input fields. So we have our first input field. Now I want to do another one for the second piece of state, which is going to be the age. And let me paste that down here. So I just copied this and pasted it down here. I'm going to say enter age instead. For the placeholder, I'll say eg g. 99 and then we want to set the age this time with the value of this input field rather than the name so let me save this and again let me enter into these two fields so first of all the name i'll type in mario and then the age which is going to be i don't know 25 press the tick and now we can see name is mario and age is 25 awesome so now we've seen how to add a text input and track the information that a user types in and update the state with that data. I just want to show you one or two more things, one or two more props we can add to text inputs. The first one is going to be the multi-line prop, like so, and this allows us to add multiple different lines inside the text input. So say we've got like a blog post to write or something like that, or more than just one word, like a few sentences, we could use the multi-line. If I save this now... Then you're going to notice over here. It's probably not going to look any different But if I start to type and then enter it goes on to the next line and it gets bigger Okay, so that's one thing the next prop I want to show you is the keyboard type and we can set this equal to several different things It could be default or number pad or numeric for example if I type here numeric and in fact that should probably go to the age input not the Name one because we want a number here So I could add right here the keyboard type to be numeric If I save this and then when this reloads If I go to this, the keyboard that pops up is now numeric Okay? So there's quite a few different props we can add to text import And we are going to see more of them in the future But if you want to read more about them now I will leave a link down in the description below So you can check out all of these different props you can add to a text input field In the next video, I want to move on and show you how we can work with lists of data and outputting those lists to the screen.

So we imported that it's just text Input like so and it's a self closing tag So let's first of all save this and take a look at what this looks like on the screen over here So we can see enter name at the top, but this down here this input field. We can't really see It's just a blank space. However, if I click into it, we can see the cursor and the keyboard pop up So it is there.

However, we can't really see it So what I'm going to do is add a style prop to this and set it equal to styles Then we'll call this style input. So dot input and let's create that down here So input and that will be an object and this is just going to have a few simple different properties So first of all border width and that is going to be one because by default it doesn't have a border Also, we want a border color and that is going to be 777 so kind of like a deep gray then I'm going to give this a bit of padding which is 8 pixels margin which is 10 pixels to bring it away from these two text lines and then also a width of 200 pixels So if I save this now We should see something that looks a bit more like a text input over here awesome And if we click it we can see the cursor and we can type stuff in there now at the minute when we do this Nothing is happening. We're not taking that value and doing anything with it.

So I'd like to do that, but first of all, let me show you something else I can also add a placeholder into this text input as well And we can do that by adding a placeholder prop on the text input Now what I'm going to do is format this a little bit differently. I'm going to bring this down to the next line Otherwise, we're going to have loads of props going over and out of the screen. So I'm just going to stack them instead So first of all, we have the style then I'm going to do a placeholder.

So placeholder I'm gonna set that equal to a string and I'll just say eg John Doe Okay, because this is a name input. So if I save that now, we should see that placeholder Inside the text input there it is in faint gray if I click it and start typing it deletes that and replaces it with whatever I type awesome. So now we have that placeholder. We have the style what I'd like to do is detect Whenever the value changes, whenever a user types a new character inside this field, I want to then take the current value that's inside the field and I want to update our state, the name, with that new value.

So to do this, we need some kind of event listener. So, you know, like on the button, we have the on press prop. Well, on an input field, we can have on change text. So whenever the text changes inside the input.

Then it's going to fire some kind of function in here now We could externalize it up here like we did before but this time i'm just going to do it in line inside an anonymous function Because it's just going to be a one line statement. So all we're going to do is call set Name, which is the function up here to set the state of this and we're going to pass in a new value And that value is going to be whatever a user types in whatever the current value inside here is now When we pass a function to onChangeText, that anonymous function or whatever function we reference here automatically takes in the value inside. The text field at that moment in time so we get access to what the user has typed in and when we set name we can Pass in that current value into that function. So we're updating the state So if I save this now then hopefully when it reloads I can type in something now watch the name change Down here as I type because every time the text changes in here We run this function and we update the name using set name Since we're outputting the name down here and it's been updated it should update in real time over here as well to reflect that change So I'm going to change this to Mario and as a type you can see it changing at the bottom as well Awesome, so it's updating the state with whatever I type in to the text input And this is really good because if you have a form in the future for logging in or signing up You can gather all of the information from a user and store in some local state and then take all of that data and make a request to whatever server you need to to sign that user up.

Okay, so it's a good way to track what a user is typing into these input fields. So we have our first input field. Now I want to do another one for the second piece of state, which is going to be the age. And let me paste that down here.

So I just copied this and pasted it down here. I'm going to say enter age instead. For the placeholder, I'll say eg g.

99 and then we want to set the age this time with the value of this input field rather than the name so let me save this and again let me enter into these two fields so first of all the name i'll type in mario and then the age which is going to be i don't know 25 press the tick and now we can see name is mario and age is 25 awesome so now we've seen how to add a text input and track the information that a user types in and update the state with that data. I just want to show you one or two more things, one or two more props we can add to text inputs. The first one is going to be the multi-line prop, like so, and this allows us to add multiple different lines inside the text input. So say we've got like a blog post to write or something like that, or more than just one word, like a few sentences, we could use the multi-line. If I save this now...

Then you're going to notice over here. It's probably not going to look any different But if I start to type and then enter it goes on to the next line and it gets bigger Okay, so that's one thing the next prop I want to show you is the keyboard type and we can set this equal to several different things It could be default or number pad or numeric for example if I type here numeric and in fact that should probably go to the age input not the Name one because we want a number here So I could add right here the keyboard type to be numeric If I save this and then when this reloads If I go to this, the keyboard that pops up is now numeric Okay? So there's quite a few different props we can add to text import And we are going to see more of them in the future But if you want to read more about them now I will leave a link down in the description below So you can check out all of these different props you can add to a text input field In the next video, I want to move on and show you how we can work with lists of data and outputting those lists to the screen.

Transcript for:Managing State and Text Inputs in React

Transcript for:
Managing State and Text Inputs in React