Complete React Tutorial (& Redux) #5 - State

Key Takeaways

alright then so now we know how to create basic components I want to move on to something called component States now the state of a component is just that it describes the state of the component and by that I mean this state of the data or the UI of a component because after all our data within our applications will most of the time be dynamic and forever changing or updating over time and modal could open or close or the data we output could change in the browser so imagine we have some kind of component which is for a shopping cart on a website now the state of that component is just a JavaScript object and it looks something like this so we have our object a property name called items which is an array and inside that array two objects and each object represents an item in the basket or the shopping cart so this is the state of that component restoring the local data if you like of that component each item has a name and a price now imagine a user adds something to the shopping cart the add a new item then the state would update to reflect that so we'd have that new object right here black cloak and price 15 pounds so the idea is that were taking this state of our component and we're using that to output dynamically the content inside that component so we're keeping the state and the output on the screen in sync with each other right so it's a way for us to store locally the data or UI state of a component another example could be for a pop-up we could have a component for a pop-up and it has a state very simple with just one property on it called show pop-up and that is either true or false now if it's true then it's going to show on the screen if it's false it's not going to show on the screen so again we're storing the component UI state here all right so that's roughly what the state is all about but until we get our hands dirty and start playing around with it a little bit I think it won't make perfect sense but if you're familiar with you by the way it's pretty similar to the data property on a view component right so anyway we'll have a play around with this and and hopefully it's gonna start to make sense a little bit more alright then so let's add some state to this component that we've already created so there's a couple of different ways we can create the state of a component and the first way which is the easiest is to just define a state property inside the class right here or inside the component and we set that equal to a JavaScript object that's all is the state just a JavaScript object which is going to contain some kind of data or UI state so now we can add our different properties inside this object so for now let's just do a name property and I'm gonna give that a value of Rio and we'll also do an edge property and I'll give that a value of 30 okay then so that there is our initial state of your like of this component and yeah it could update over time we could change this to 35 or this to crystal or something else but for now that is the state of the component when it first loads so it's okay having a state defined on a component but at the minute it's not really doing anything if we were to save this and preview it in a browser then it's still gonna output the same template with this random number and hey ninjas we want to maybe output this state to the template so let's do that so instead of this stuff right here let's output something else again it is going to be dynamic we're gonna output some kind of dynamic data here so we can't just output it directly in the P tag right here we have to enclose it in those curly braces remember this is how we output dynamic content of data so first of all outside of that I'm going to say my name is colon and then inside here this is the dynamic data we want to output this thing so how can we reference that here well first of all we say this to reference the component itself then we get access to the state property on this by saying this dot state which refers now to this object then we want the name property so we can just say dot name and so if I save that now it's going to output this to the browser my name is Ryu okay so it's taking this property and it's outputting it right here all right let's output the age as well so I could say and I am and then we're going to output dynamic content again so I can say this dots state dots age like so so if I save that now we can see my name is Ryu and I am 30 and if I change the state to 35 then we can see and I am 35 and the same would be true for the name we'll change that to crystal and save it preview that in a browser and we can see my name is crystal and I am 35 okay so that is how we define our state there is another way of defining States on a component and that is inside it constructor method but really that's not necessary at the minute but the idea is that we have this state and over time it could change I could import a form field or click a button and that's going to change this data and therefore when we output it right here it's gonna update in the browser as well so we're keeping the UI and the data the state here in sync with each other right so there is also a little tool I want to show you in the next video which is going to allow us in the browser or in the developer tools to keep track of the states of the components that are being rendered to the dump so I could go to a different tab over here and see the current state of that component and I'm going to show you that in the next video