React Native Tutorial #4 - Using State

Key Takeaways

okay then gang so hopefully now you're a bit more comfortable with this style of syntax using view components and text components its output stuff to the screen as well as styling those using a stylesheet in react native as well now I'd like to take this one step further by adding state into the mix so that we can output some dynamic content to the screen as well inside these components so to do this we'll be using a react hook now if you don't know what react hooks are at all I would suggest watching my playlist all about react hooks in context first of all because I'm going to be using them quite frequently in this series but basically Hawk's give us a way to use special functions to tap into certain features in the react library now in our case we're going to be using the use state hook which means we can use states inside a functional component which is what this is so first of all to use that hot we have to import it up here so inside curly braces let's say use States so we can import that from the react library and then let's create a bit of state using that hook so we do this by saying Const and then in brackets or square brackets so an array we have the actual piece of state which I'm going to call name and then the second item is going to be a function we can use to update that bit of state in the future called set name so that is going to be equal to the use state hook and inside here we pass int the initial value of this bit of state so I'm just going to pass in Sean so to begin with this name variable right here will be giving the value of Sean that is the bit of states we're creating and in the future if we want to update that value then we can use this function to do that okay so what I'm going to do is inside this first text component is just say my name is and then I want to output some dynamic data and to do that we use curly braces and then whatever variable we want to output now the variable I wanna output is this thing here named so let's paste it in and save that and then hopefully we should see that over here on the screen my name is Sean awesome so we're taking that bit of state now and we're at point it in the text now what if I want to change this in the future well I can do that using this function so what I'll do is create a button over here we've not seen buttons yet and when we click on that button I want to update this to a different name so down below this second text widget right here I'm going to create another view and this view is going to be a container for the button just so we can style the button a little bit so I'm gonna say style is equal to Styles dot button container and we'll create that style in a second but inside this view we now want to create a button now react native comes with a button component built in to the library so let's import that up here button and we can add it down here inside the view like so and we don't have a button with an opening and a closing tag much like you might think and then place the text inside here like click me that would be the logical thing you'd think would happen right but no in react native button is a self closing tag or a self closing component and what we do is pass props to specify what text is going to be on the button itself and that prop is a title prop this will be a string and it's just going to say update state or update name or something so if I save this then preview over here we should be able to see this button down here and this is the default style of a button now the reason I place this inside a view was so we could add styles to the view itself now we can't add a style property to the button itself I couldn't do that react native doesn't allow us to do that and we can get around that in the future by creating our own custom buttons the react native library comes with the bottom component and we can change it a little bit by adding some different props here change the color and we'll see that later on but we can't actually add a style property to it so I've surrounded it with a view so I can add the style property to the view and then we can style that so if I come down here I could say button container now that would be an object and all I want to do is give this a margin top of 20 pixels just to bring it down a little bit so I'm gonna save that and we should see it brought down a little bit down here there we go okay so now we have this button if I click on it at the minute it doesn't actually do anything and the way we can hook up some functionality to a button is by adding an on press prop so unpress is going to be equal to some kind of function now we could add the function here directly so I could do an anonymous function and arrow function and then you know do something here but I'm not going to do that instead what I'm going to do is kind of externalize this function I'm going to create this function up here because when you add you know quite a bit of a logic to a function it's not always the best idea to do it in line because it becomes messy instead sometimes I like to separate the functions out unless it's just a quick one line one so what I'm going to do is create a new constant and call this click Handler and this is just kind of like a convention or we could call this press handler it's up to you you know we do the function and then handle after it this is a convention react uses you don't have to call it this that is going to be equal to a function and it will be an arrow function in our case and inside here we're just going to use the set name function up here and then pass in the new value so I could change this to chun-li for example and what this will do when this function is called is use this function to update this bit of state right here and the new value of that bit of state is whatever we pass in to the function now again we can't call this function whatever you want you could call it boot if you want and then you'd invoke boo but that obviously makes no sense whatsoever again this is just a naming convention whatever the value is whatever we've called it name and then put set before it to set the name so now we need to grab this function and put it in here so that when we press a button it looks on this unpress prop and it sees that we're referencing this function and it goes ahead and fires that function for us and updates the name when the name updates it's going to re-render wherever the name is output so we should see update in real time over here so let me save this now so it updates we should see shown to begin with because that's the initial value if I click on the button now then we can see it changes it to chun-li awesome now we can use as much states in a component as we want we don't have to just use this once this hook if I wanted to create another bit of state I could do so I could say for example Const and then this time we'll call it person and sets person is going to be the function to change that set it equal to use state to create another piece of state and this time instead of just being a string I'm going to make this an object and we can do that we can pass any kind of variable type into the state a boolean an object a string and array it's entirely up to you the first property is going to be name and that will be Mario and the second property will be age and that will be 40 so now we have this second piece of state person I want to output that down here inside this second text component so I'll say his name is and we want to output a variable so person and then we want the name property on that person dot name so we're grabbing this thing right here so after that we'll say and his age is person dots age so all we're doing is grabbing this person bit of state and then the name and the age and if I save that now then we should see over here that that is going to show hopefully his name is Mario and his age is 40 again we could change this if we wanted to by adding in the set person function in the click handler so let's do this set person and then inside a new value which is going to be an object the name will be Weegee and the age is gonna be 45 really don't know who's older of Mario or Luigi just a pas save this and then if I click the button then it's gonna update the name first of all to chun-li and then the second piece of state this object to Luigi and 45 awesome so that's how easy is to use a bit of stay or several bits of state inside a react native component very similar to react from web so now we know how to do that in the next video we'll take this one step further and look at text inputs to get information from a user