React Context & Hooks Tutorial #10 - useState Hook

Key Takeaways

okay then so right now we have this functional component right here which renders this small lists of songs now I don't want these to be hard-coded these songs I'd like them to be stored in States and then dynamically out put them in a template now normally to use states inside a component it would have to be a class component but now with react hooks like I've said before we can now use states inside a functional component like this as well and we do that by using a hook called use States now that hook is just a function and it's going to allow us to use a piece of state inside this functional component so let's start off by importing that hook up at the top so comma then we won't use States from react as well so we'll use this hook at the top so we'll say use States like so so we're just invoking a function that's all we're doing here now this hook accepts an argument which is going to be the initial value for this piece of state that we want to use so like in a class component we say something like you know state is equal to an object where we define different properties what we're essentially doing is defining a property of state inside this function now so I want to define some songs inside an array and that's going to be the initial value of this piece of state inside this components so I'll do in a rate first of all then I'll go to a new line just to give myself some room and I'm gonna do an array of songs in here now I'll just paste these in it's literally three objects very simple and each object represents a single song it has a title and each one has a unique ID as well so we have these three objects now stored in this array as the initial value for this piece of state so this function returns an array and inside that array that it returns to us there's two values the first value is going to be the actual data the piece of state itself and the second value is going to be a function which we can use to edit that piece of state so it returns those two values inside an array so we can use array destructuring to get these two different values I'm gonna say Const and then array is equal to this thing right here and the two properties we can call what we want but typically I name them whatever the state is whatever that defines so for example songs so I'm gonna call the first property songs and the second one is going to be set whatever I call it so set songs in this example so now we have the dates itself and also a function to change the data and now this is the state for this property inside this component and we can use it inside this component now we can use songs to reference this array of data so now we can cycle through that inside the template down here so that we don't have to hard code it instead I'm going to say songs dots map because we're going to map it to a new array of HTML templates and inside this function we'll take the song each time around so it's going to cycle through the array perform a function for each one in that array each item and each time we reference that by song so now we can return some JSX for each element so return and then in parentheses and just gonna say first of all Li and inside the Li tag I want to output the title property of the song so I'll say song title and then also when we cycle through things like this react expects us to provide a key property which is unique for each element as well and that's why I added this ID property right here so it will say song dots ID for them so now we're cycling through that state and without putting a bit of template for each one of them so now let me see if this works I'm going to save it and come over here to the browser and now we can see all of those things out here in the browser so that's worked now we can use this state inside a functional component which is pretty awesome just using this one hook use state okay so say we want to change the data say for example we have a bottom down here which when we click it it adds some kind of new song so first of all let's create that bottom I'm going to say button right here and in there I'll say add a song we'll need to attach an on-click event handler to this and that is going to reference a function called add song which will create now so let's create this function over here we'll say Const add song and set that equal to an error function and inside this function what we want to do is change the data now remember I said that this function that we get back from used a is used to change the data so all we need to do inside here is say set songs which is what we called the function and then inside here we pass whatever value we want this data to be now we still want it to be an array so we pass in an array and this is going to completely replace whatever the current value of songs is inside here okay so we can't just add something extra into this we have to output the whole thing because it's going to completely replace it so for that reason we need to use spread syntax like this to say get the current songs and spread them into this array so it's going to grab each one of these and put them into this new array and then we want an additional item in this new array so that's going to be a new object which will have a title property and this is just going to be like new song and then an ID property it will just say that's for for now because we have one two three already so now hopefully when we click on this button it's going to run this function it's going to use this set song's function which we get back from use state right here so we can change the state we're passing in a new array which is going to completely replace the current array the current value of songs so we're spreading the current elements out inside that new array and then adding a new one as well so let's give this a whirl I'm going to save it and come over here and click add song and now we get new song over here it works but watch this if I add a new song again we should get some kind of warning or error and we do and that's because each time we add a new song we give it this value ID a4 and when we cycle through those songs and we output those then we're saying the key is the ID property so every time we add and song and he updates there it's still getting ID for for each element now react wants these keys to be unique for each different element it outputs so we can't just hard code it's before every single time so we need some kind of way to generate a unique ID for each new song fortunately there is a package that we can do that really easily with so I'm gonna go to a new console and let me just play this so I can see what I'm doing and then I'm going to install a package now first of all I need to CD into hooks up so CD hooks up and then I'm going to install a package called UUID so npm install UUID okay so once we've done that we just need to import it at the top so I'll say import and it's going to be UUID from and it's UUID and /v 1 there's different versions we can use I'll just use v1 for now and then we just need to use that down here and all we do is invoke this which is a function and that generates a unique ID for is every time around so every time we add a new song it's gonna be something different so instead of hard-coding this to be for now I'm gonna say uhyou ID which is this function we just imported and then invoke that to create that new unique ID so save it and come over here and now if we add a new song and a new one and a new one we no longer get that error and if we go to react over here and open this up and go to the song list we can see all of these Keys are now unique so it's generating these forests so anyway there we go my friends now we have used this hook use state to use some state inside our functional component and that is pretty awesome because we could never do this in the past we'd always have to use a class component to use State but now all it takes is one simple function one hook use state to do that now inside a functional components so remember this returns two things the actual value of the state and a function to change that value this accepts a parameter which is the initial you of that piece of state as well and then we just use it as normal inside the component