Building a basic todo application with React

in this video we're going to walk through building a very simple to do application in react we're going to use code sandbox and a template has already been set up with all of the scaffold for the styles so you can join in and watch and also if you want follow along so let's go ahead and jump into the application and i'll walk through what we currently have so looking at code sandbox i'll leave a link in the description for this template to start using but what we have right now is very basic styles built out as well as some of the states for the to do application so as you can see on the right hand side we have to do's we have a list of elements and then we have check boxes and we can line through based off of class names so if the to do is complete then we have complete as the class name for the to do and then also on top of that down below for this navigation down below we have buttons and if it's active you can have the active class and as you can see if i swap this out for this you'll see complete is now active so we can switch between filter all complete and incomplete so to start with let's add a little bit of state management to this application and let's go ahead and come up here and we'll import use state from react we're going to stick with just react react dom and react script so this is pure react application so for use state we'll want to have to do's so i can say const to do's and set to do's equals use state and to do this is just going to be an array and how this works is to do's is the state itself this is the default state which is an array and this is the helper function to actually set the state so what we can do is we can basically create these lis here we'll just to-do's dot map over all this dues and for each to do we will render out this li so if i hit return here we can render out that li we won't need this one anymore i can save that and of course nothing uh actually let me refresh here so nothing renders because there's no to do's so we actually need to add an input to be able to add to do's but to start with let's go ahead and add like a very basic first to-do so we're going to say that the name of the to do is get the groceries and so that works for that so now we need to actually replace this name the span right here for to do dot name and so now we have that name uh it's not gonna be complete so what we can do is actually say let's just say this is gonna be to do and then if it's complete so say to do dot complete uh we will make we'll add the complete else we'll just do nothing so that way it'll add the complete if it is complete versus versus not so that works for that and so also what we can do is for this input we'll say on [Music] on change probably we will say e and let's just console.log out what e dot target is so if i go to console here oh uh let's see receive true for non-bullion unexpected token on change listener to be function instead got a value of boolean let's refresh the page there and then okay so that works console.log checkbox e dot target dot checked should be what we need to get for this so let's minimize that again and so then if i do that we'll see whether it's checked or not let's move this down so we can see checked true false true false true false so now what we can do is we know the index based off of this to do itself so we can say to do an i for index so we can actually change the to do's itself with set to do's so what we'll do is we'll say set to do's and we can actually get all the to do's from in here and we'll say to do to do's dot map and here's the to do with the index we'll call this index up here and then we'll wrap this in a function that way we can make this an arrow function and so if i is equal to index then we know it's the to do that we're updating so we can just say return to do and then we also want to return whether it's checked or not so e dot target dot checked or checked and up here we'll add like a default checked of false and then else actually we don't even need an else we can just return to do there uh other thing we need to do is looks like we need there we go an empty print so now if i actually check this you'll see that it gets checked and unchecked but it's actually changing the state what we can do is we can console.log that those to-do's up here and when i click it we'll have that object checked false true should be false awesome so let's let's make this complete instead of that so we'll say complete complete and so now you should see if i check it we now actually have that line showing up because it knows that it's complete so there we go for that the next thing we need to do is add some sort of input to be able to push to do's onto the list so we can actually add that like right right right below the h1 we'll call an input and we'll say type is equal to text and then we'll have the name is equal to to do and then on change or actually hmm how do we want to do this let's first add a class name here and we'll say like we can just call this input for now that way we can go over here and we'll just add this one small style here and just say margin bottom of 5 pixels that'll push that down a little bit and then we can say width of 100 percent uh yeah that's fine for that same max width of 300 so it stays within see input wrapper it should be staying within that margin zero padding zero probably no padding let's say padding of four pixels that way it moves it a little bit bigger let's just remove the width for now and then we should be good for that so now we can actually type inside of here and the idea is when i hit enter we should be able to push to the to-do list and so how are we going to do that exactly let's see what we want to do is we want to have a function up here and we're going to say const handle change there's gonna be a function it's gonna take the event in oops handle change function it's gonna take the event in and then it's to say e dot target dot value and we're actually going to look for the enter key so e dot key if e dot key is equal to enter then we actually want to do something like set to do's and then we're basically going to take the current to do's push it on there and then create a new to do with that name so we'll just go ahead and let's add it to the top so we have so to get the groceries we want e.target.value and we'll call handle change down here so on change so now if i actually type inside of here hit enter uh let's console.log out e dot key it might be key code let's see e so let's open this up we have let's see let's do let's look this up real quick so we have react get key code ah it might be on handle on keypress that's what yeah event.keycode so let's change this keycode is what we want then we actually want to say instead of let's say handle handle key down and on this one we'll say on key down save that and then if we type in here we should get key code so enter so we can actually say key right here so key is equal to enter and that should give us what we want there we go next thing is we probably want to clear out that value so we could do this one of two ways we can actually create like the value up here using use state we can do that or we can get a ref and clear it ref would probably be nice so let's just go ahead and do it that way so we'll say use ref and we'll say const ref is equal to use ref and right here we'll say ref is equal to ref that way we can do after this we can say ref.current dot value is equal to empty string so that way when i hit enter it clears it out and we're good to go uh oh need to remove that a so from here we're almost done we can actually select all the ones now we just want to get that filtering down below working properly so how would we do that so for filtering down below we're basically just wanting to filter off the current list so we just need some sort of way of knowing how to filter off that list and so what we can do is we can use like a constant value uh would be a good way to do this so we could say const we another piece of state we can say filter is equals to set filter and say use state and the filter is going to be all complete or incomplete and what we can do up here is instead of having magic strings we can say const filters is equal to and then we'll say all it's going to be all complete it's going to be complete and then incomplete it's going to be incomplete the benefits of this is you won't have issues with mistyping stuff so now i can just say down here the default state's going to be filter.all and so now what we can do is right here we can say to do's actually right up here we can say const filtered to do's is going to be to do's dot filter and then to do and inside of here we can just say if filter is equal to filters dot all then just return true else if filter is equal to filters dot complete then we want to return if to do is uh complete and the last else will just be return if to do's is not complete and so from there we should be able to use filter to do's right here so filter should use by default is all so what we can do is down here at the bottom we can update this and basically say that this is going to be a button and we'll say um filter is equal to filters.all then we'll say active else it's not active and then we're going to use this similar logic for this as well as this but instead of dot all we'll say complete or inactive or incomplete so now we just need the action to update this so we can say on click equals set filter and we're just going to say filters.all and then the same thing with these other ones we want to say instead of filters.all filters.complete and filters.incomplete so then when i click this stuff what should be happening is it should be filtering off of whether it's complete or not i think i actually have it reversed up here so let's see there we go so all complete and then incomplete is not working let's see console.log filter to do's all complete all complete and complete filters there we go oh i did have that logic right so let's uh remove that and then put that here that's what we want so complete so complete and complete complete all now the other thing is is this check box is not remaining checked so what we can do is we can actually make this a controlled state and we'll say that um value or actually we'll say checked and then we'll say to do dot complete to get that checked value that way we know if it is checked it'll always stay checked so one two three i need eggs checked check check checked complete incomplete and you can see they filter themselves out whenever you uncheck them looks like it's let's see complete get the groceries when i click on that it doesn't look like it's updating properly probably because the index is different would be my guess because yeah so what we can do is set to do's instead of index set to do's to do's map to do yeah this index is different which is the reason why uh let's see what we can do instead of uh indexes we can do like a random number so let's see random number id javascript uh we don't really want to use uuid here's a good example so math.random string slice so let's just do this so we'll say that id is equal to that and so then whenever we actually create a to do we'll give it its own id and that way down here instead of doing by index we can say remove this and say to do.id is equal to t dot id so that should give us a better way of filtering off of things let's refresh here we also need to make sure that each input has its own which is really nice for keys here we can say key is equal to to do dot id and now we don't need this index test one two three let's say to do [Music] to do's to do's map t that should be t return t test there we go that's what we were wanting um yeah let's see let's let's make this a little bit more explicit here so we'll say filter to do that to do complete filter do complete and that way this can be to do to do to do to do filter to do all right example one two three you can see that they're checked i can come back to complete i can go there to incomplete and now we have a way of actually filtering all complete and incomplete on the to-do's so this is just a quick example of how to use react uh very basic i think it's what 112 lines of code most of it was just boilerplate of the html gsx that we created uh we can remove this console.log here down below in the description i'll leave a link to both the completed solution as well as incomplete solutions so if you wanted to give this a shot yourself and create your own to-do's list and be able to filter off of it you can alright we'll see you in the next video don't forget to hit the like and subscribe bye

Channel: n3arby

Views: 673

Keywords: react, javascript, learn, coding, codesandbox

Id: yJdbVf-CaUQ

Length: 23min 44sec (1424 seconds)

Published: Fri Sep 10 2021