Ultimate React Todo List - Create, Complete, Delete, Edit, and Save Todos

what's going on everyone in this tutorial we're going to make a to-do list in react similar to the one on the screen we're going to have the ability to create new to-do's edit them complete them delete them everything that you might need on a basic to-do list and will also have the ability to store and load them using the browser's local storage so let's go ahead and get started alright so the first thing that we're going to do to get started is create a new react app using the tool create react app so go ahead and navigate in your terminal to a folder that you want to build your project in and use the command npx create react app followed by the name of the project and i'm going to call mine to-do list this process can take a couple of minutes great now once your project is set up like this we can go ahead and navigate into the folder using the cd or change directory command and if you're using visual studio code one quick way to open the project is going to be to use the command code dot and this should open up our application in a new visual studio code instance and for this tutorial we're going to be working in the app.js file so you should be seeing something similar to this we're also going to go ahead and get the app started in the browser so that we can start developing on it so go ahead and enter the command npm start in your folder all right now once your application is running in the browser you should see something similar to this and we're going to be using the app dot js component for this tutorial but we actually don't need some of this boilerplate code so go ahead and delete everything between the two divs that we have here we're really just going to be starting from scratch here and additionally to that if you have a newer version of create react app we're also going to want to import react so at the top import react from react and this will be necessary to use our react hooks to be able to access them and for this tutorial we are going to be creating a to-do list and we are going to save our to-do's in an array of objects each to do is going to be an individual object and we can go ahead and set this up by adding a new custom hook we're going to be using the use state hook and we're going to call this hook to do's so go ahead and add the used state hook if you haven't um if you haven't used this hook before don't worry i'll explain it in a second and we're simply going to add a const array and inside this array we'll have our to-do's and a set to-do's value and this will be equal to react dot use state and we will set this to be default of an empty array and i'm going to make this a little smaller that way we have the full screen if you haven't used a used state hook before essentially how this works this is built into react and we have access to a variable that we can declare in this case we're going to call it to do's this is going to be our array and its default value is going to be whatever we pass into this use state method here in this case just an empty array because we won't have any to do's to start and this second value is going to be our setter function and so this setter function set to do sorry set to do's is going to set this value of to do's and we're going to use this every time we add to do's to our array additionally that we're going to want to keep track of the current to do we're adding so we can make a second hook and we'll say to do and set to do and we will set this equal to react.ustate with some empty quotes and you'll see where we're going to use this in a second these are just our first basic hooks that we're going to want to be using and so now let's go down into our markup and we can create a form element and really get started with this project so first create a form and inside this form we are going to want to have an input where we can type our values into and we can go ahead and give this a type of text because it's going to be a text input and underneath this input let's go ahead and also add a button which we can label add to do and this button type is going to be a submit button type and now if we go ahead and save our project our default boilerplate code should disappear and we will instead see our input show up all right so we've got our text input here this is where we're going to be typing in our to-do's and we've got our input our button for add to do so we can submit a form event and the next thing that we're going to want to do is wire up this input so that whenever we type in any text it will be applied to our to do hook variable up here and the way we can do that is we will add an onchange handler onto this input and we'll set this equal to some curly brackets and in these curly brackets we will we will pass in an arrow function and we will use the hook function that we made earlier set to do and the reason that we're going to want to use an arrow function here because we actually want to pass the text that we're um trying to set and so we are actually going to use the event or e here so go ahead and pass this into your arrow function and this e or event is simply a form event so anytime you use a button or an input the um the browser javascript gives you access to this e value and this is going to be where we can take the text from our input and the way to access that is going to be to pass in e.target.value to our function and so e is an event object like i mentioned and target is simply going to be this input that we've created already and value is going to be the value of that input additionally we're also going to want to add a third property onto this input we're going to want to add a value and we will set this equal to our to do and so this on change handler here is going to set our to do hook variable to whatever the whatever we type in and this function is going to run every time we type something in and this value here is simply saying make sure the value of this input is whatever our to-do value is that way if we set our to-do outside of this input the input will reflect whatever we're whatever we're showing this is what's called a two-way data binding it's a good practice to have especially if you're going to be using additional functions that will change this value and we can even see what's going on here if you go ahead and open up your developer tools in your console and if you if you don't already make sure to have react developer tools installed they're really useful we can actually see the values for our hooks here and if we start typing in here we'll see whatever text we put in will show up in our developer tools and that's how we we know that our onchange function is working here so this is our uh this is how we wire up the input and now we're going to want to be able to add this to do to our to do's array so next go ahead up to your form element and we will add an on submit handler here and this on submit handler will run anytime a button with a type of submit is clicked and so we will pass in a function a function that we haven't made yet but we'll be making in just a second so add the handle submit function and we we won't be passing anything into this so we can we don't need to use an arrow function we can just call the name of the function like this we could also if we wanted to make this an arrow function but it's not necessary in this case and we'll go up underneath our hooks now we're going to add a function that will run when the form is submitted so we can call this function we already called it handle submit so let's do that and again since this is a form a form handler we will have access to the same e value and so we are actually going to want to use this because by default forms will refresh the page when they're submitted and we don't want that so the first thing that we can do in our function is add this prevent default method this is a common practice in react because again like i said by default if we don't before i save it if we don't um then when we submit our form if you might have noticed there was a refresh on the page which we don't really want and now when we have our e dot prevent dot prevent default the page won't refresh when we click this add to do button get rid of this real quick and so we can we can type something in here and we'll see the the page didn't refresh on us so that's just a good thing to have when you're submitting a form and now we'll we'll want to make our object for our to-do's array for the first to do which we've already assigned to the to-do variable so what we can do is create a new object and we will call this object new to do and we'll apply some properties to this object the first one that we'll want is an id anytime you're using multiple objects it's a good practice to have an id just to differentiate between your objects and we'll want this to be a unique variable so one way we can do this is we can set this equal to a new date object and we can use the get time method and so we really just need a unique value here and this this here will give us the number of milliseconds after 1970 so this should give us a unique time every time we run the function and after that we can add a diff another property to our new to do we'll add the text of this to do and we can set this equal to our to do hook that we declared and set earlier and lastly we can have a completed value we'll default this to false just because the to do is not going to be completed at first and so this will set up a new to do for us and now we can call the set to do's function that we created earlier and what we're going to want to do here is take in what our current to-do's are and add our new to-do to it and one way to do this is we can use the spread operator to clone our to-do's variable it's already an array and this won't matter in the first case but once we add multiple to-do's this will simply take our to-do's array and make a new array out of it and this is just to prevent mutating the data just a good practice in react anytime you're using arrays or objects if you copy your rare object first then you won't have to worry about mutating the original data and we can concat concatenate on our new to-do and so this will add our new object into our to-do's array and after this i think it would be best if every time we added a new to-do we reset the input and made it blank because we're not going to be one wanting to add that same to-do so here we can use the set to do singular function and we can pass in an empty string just to retur restore this second hook to its default value of an empty string and now we should have access to our our to do's should be wired up properly when we submit them one way we can find this out let's go ahead and output them all as well to the screen we're going to want to be doing this anyways so let's go under our form element in our jsx and we'll add some curly brackets to get into javascript and we will map over our to-do's so we'll use to dos.map and if you haven't used map before this is a javascript method that will go through each element of an array and it will return some value in this case um we're going to be wanting to return our html or our jsx for our to do and map takes in an arrow function we will be um naming each individual element in that array by we'll call it to do and this is just an arbitrary variable or value that we um we're going to use to access each element in our array and we can immediately return a div here and inside this div we can access with some curly brackets are to do dot text and so if we go ahead and save this this um this code right here should display our to do's to the screen now that they're connected to this to do's hook value so we can go ahead and start adding to do's say eat pizza i'm actually gonna make this a little bigger just so just so everyone can see and now you'll notice we have a to-do list set up we can add to-do's and they are also appearing to the screen so that's that's great that's the first step we've got a working to-do list and now let's enhance it a little bit let's go ahead and add a delete button just in case we want to delete any of our to-do values so inside our map div that we created here and actually before we do that if you go to your console you'll see there's a warning here each child in a list should have a unique key prop we can get rid of this warning by going to this opening div tag here and setting a key value of something that's unique and since we made an id earlier let's access our to do dot id here and if we go ahead and save again give it a refresh we'll notice that this error should go away loading a little slow here but we've we've got no errors anymore we can add our pizza to do again should appear again no warnings so let's go back into our div now we're going to be adding our some buttons inside this div so we can split it off into a few lines and i'm going to surround this to do text by div as well just to keep things organized and underneath this to do text we can add a delete button so let's go ahead and do that and we can just add a button with the text delete and we're going to want to put an on click handler on this button that way we can run a function when we want to delete this to do and let's go ahead and pass an arrow function in we're going to call a function we haven't created yet but it's going to be called delete to do and we're also going to want to specify which to do to to delete so we can pass in the to do dot id into this function and again arrow functions are useful especially when you want to be passing in a a specific variable to your function so let's go ahead and make that function now underneath your handle submit function let's create a delete to do function and this function will also take have the parameter of id which will pass in that's the to do id we're passing in here and how we're going to do this is we're going to take our to-do list and we're simply going to filter out the to-do that we're trying to delete the to-do with this id so one way we can do this we'll set a variable for our new to-do's and you know what let's call this updated to-do's just to be a little more specific and here we can use the same trick to spread over our to-do's array so we are not mutating the data and we'll go ahead and filter this array filters like map it's another array function in javascript and it will take an arrow function and we can use the name to do to reference each individual element in this array and so how filter works is if you return a truthy or true value true boolean then it will include that element in the array if you return a false value then it will um it will not return that value so we're going to want to be shorting shortening our to-do's array by taking out our to-do with the id of id so we can say return only the values where the to-do.id is equal to or excuse me is not equal to so we're using the not equal equal id and this will be true for every to do except the one we're deleting and so this should give us a updated to do's and this should be updated to do sorry an updated to-do's array that is one shorter than the to-do's array we had before and we can set our to-do's to be our updated to-do's and if this works we should be able to save and delete our eat pizza to do i think we might need to refresh first so we'll add this eat pizza and we can delete it awesome so we've got our delete functionality next thing that we're going to want to add is a check box for whether or not the to do has been completed so underneath your delete to do go ahead and add another input and this input is going to have the type of checkbox and so this will be i'll add it another to do so we can see the check box so we've got a check box here and um every time we click on the check box we can access we can run a function using the on change to the other input and we're going to want to make a function here as well we'll use an arrow function so that we can specify which to do we want to toggle and we can call this toggle complete all right so we will pass a to do dot id into this toggle complete function and we will use we will call this function or will declare this function above and this function is going to be somewhat similar to our up our delete to do function except this time instead of removing a to do we're just going to want to modify a singular one of the to-do's so we can go ahead and use a similar pattern we'll say our updated to-do's are equal to our spread to-do's and we'll use the map method and the map method like i mentioned earlier will return a specific value for each to do in our array to make our new updated to-do's array and so i'm going to open some curly brackets here because we're going to want to use a couple lines to do this and the first thing that we can do is we can add an if statement and we can say if the to do dot id is equal to the id that we pass in so this means if this is the to do we're updating then we can say take the to do dot completed value and set this equal to the opposite of whatever it is so ah exclamation point to do dot completed and this will modify the completed value of um whichever to do we're trying to modify lastly after our if statement we can return that to do and this return will return every to do in our array but only um the it will only modify the one we're trying to change and after that outside of our updated to do's function we can go ahead and use a similar pattern from earlier we can set our to do's equal to our updated to-do's all right so we've got the function working um we'll test it out in a second one more thing we're going to want to add to this input here is we're going to want to give it a checked property here so go ahead and add this onto your input and i'm going to drop this onto a couple lines just so we can see what we're doing and this checked value is going to be equal to the to do dot completed property on on the to do object and so this checked is simply going to take in a boolean value this is either going to be true or false if it's true it'll be checked off if it's false it'll be not checked off and now we can even test this out by going into our our developer tools and looking at our to-do's array and we should be able to check this off and have this become true so that's how we know that our our completed checkbox is working so that's our delete and our completed functionality now let's go ahead and keep going to our editing to do um functionality so this one's going to be a little more complicated than the uh then the delete and the complete but we'll get it done so let's go ahead and add a button now and this is going to say edit to do and so in order to get this edit to do working we're actually going to want to go back up to the top and add some new hooks and we are going to want to first add a hook for to do editing and we'll also add a set to do editing function that we can call to adjust that and we'll set this equal to react.use state and this will be null by default and the reason for that is this to do editing value is going to be an id it's going to be the id of the to do that we're editing and to start out we are not going to be editing anything so we can set this to null we're also going to want to keep track of the text that we're going to change the to do that we're editing to so we can say we can call this editing text and we'll also set up a function called set editing text and you'll see the pattern here um this is pretty arbitrary but it's just camelcase for each element in these arrays with a set in front of the variable name and we'll set this equal to react.usestate and we'll pass in some an empty string and we'll use this in a second but this is uh what we're going to be editing our text to before we click our submit button because we're going to want a submit edits button so um the way that we're going to do this is we'll click the edit to do button and then the text value here that we created above is going to change into an input that we can start adjusting that value in so on our button we can add an on click and in this on click we can add an arrow function and we can call our set to do editing and again this um this is going to take in an id of the to-do we want to edit so we can pass in that same to do dot id and we will once we click this button we're going to want to have this text value this to do.text above we're going to want to change this into instead an input and this input we can create it now it's also going to be type of text like our input from earlier and it's also going to take in an onchange method and this on change method we'll also want to use the event variable to grab the text from it and we will say set editing text and again this is the text that we're editing it's the fourth hook we made above and we'll pass the e.target.value and lastly we'll also want to set the value equal to our editing text so this is the same pattern we we did above we're using the two-way data binding again and we can even drop these on to different lines just just so that you can see everything that's going on again now we have um two options to display but we're only going to want to display one of these at a time so let's go ahead and do some conditional rendering now so what we can say is whatever to do that we're editing and remember this is an id this is the third hook we made above if it's equal to the to do dot id the current to do that we're mapping over then we will use a ternary operator and so if you haven't used these before a ternary operator takes in a boolean value if it's true it returns what's whatever's in the first parentheses before the colon if it's false it will return another set of parentheses and so if it's true if it is the to do we're editing we'll cut this input and put this into our first value and if it's false then we can put our to-do text that we had earlier into our second value and so again there looks like there's a lot going on here but we can separate it a little bit what we're doing is if if this to do editing if this boolean is true it's if it's the to do we're editing show an input otherwise show um just show the text all right so this should um if we go ahead and give this a save now if we add another to do if we hit this edit to do button all of a sudden we see an input here where we can edit our to-do and uh we can maybe say eat cake and this is great we've we've set this to do value um we uh we just now need to submit our edits and the way we're going to do that is we will add another button here and we can say submit edits just underneath this edit to do button and this will take an on click and again we'll pass in an arrow function and we will we'll be calling a function that we also haven't made yet called edit to do and this function will again take in the to do's id and so we can create that function now if we go under our toggle function we can add a function for edit to do which will also take in an id and a similar pattern to this toggle complete we will say const updated to do's this is where we'll store our new to-do's we'll again spread over our to-do's and we will map over them passing in the to do value and it's pretty much going to be the same as our toggle complete function we will say if the to do dot id is equal equal equal to the id and again this is if it's the to do that we're editing then we will say to do dot text equals and we will set this equal to the editing text our fourth hook that we made above and then after that we will return the to do and again this return is going to return every to-do but if it's the one we're editing it will modify it first and underneath this we can set our to do's value and we'll set it equal to again our updated to-do's and before we finish this function let's also reset our third and fourth hook our editing text and our set and our to-do editing so we can say set to do editing and we'll set this back to null this again this is the id of the to do we're editing and we'll set our editing text and we'll set this back equal to an empty string and this is just to reset um our editing logic and again these um these names are arbitrary if you can if you want to arrange them differently if you want to name them differently feel free to do that this is just um for example and so now if we go ahead and save it we should be able to edit our to-do's so let's go ahead and give it a refresh let eat pizza and we'll edit our to do and we can change this to eat cake awesome so we've got our editing functionality working we successfully modified the text on this to do um one thing that we can do to clean this up a little bit is we have an edit to do button we have a submit edits button but i think it would be better if we only show one of these buttons at a time so go ahead and scroll down to the bottom two buttons we've created and we'll use a similar conditional rendering pattern that we used with the input or the text value so we can say if the to do we're editing is equal equal equal to the current to do id we've mapped over then use a ternary operator and so if it is the to do we're editing then we will add this submit edits button so we can cut this and put this in here and otherwise we will put the other button in our second um our second value and there might it does seem like there's a lot going on here but just keep in mind if you have if you set up your question mark and your colon and just have two empty parentheses it can definitely simplify things so um now if if we go ahead and save and refresh we will see um our uh our editing should only show one button at a time if we add pizza we only see the edit button and if we hit edit we only see the submit edits button awesome so we've got a working to-do list we've got a bunch of functionality we can display it to the screen delete check for completed we can edit and lastly i think the um the way to finish this to-do list off one thing that is really i found is really useful is using local storage to save our to-do data because if we hit refresh here our our to do's are going to go away but what if we want to come back to this to-do list later and so underneath your use state hooks we're going to go ahead and use a use effect hook and so let's create one now react dot use effect this is another method that's uh accessible in the react library and we can pass an arrow function into it and we'll also want to add a comma and a array here and this is going to be our what's called our options array so how use effect works if you've never used it before this function here will run if we leave this array empty this function here will run once when the component is mounted or at the start right when the page is loaded the component whatever whatever code we put in here will get loaded if we pass a state or a props variable into here then this function will run every time that that that variable changes and so the way we can save our data is if we go ahead and pass our to-do's array variable in here then every time this to do's array changes this function will get run and so what we can do to save our values is we can go ahead and create a new variable we're going to want to turn our array into json we're going to want to stringify it into json before we pass it into the browser so we can make a temporary variable i'm just going to call it json lowercase and uh we're going to use the uppercase.json and this is actually really an arbitrary name we can really call this whatever we want but i'm just going to call that for simplicity in this uppercase json is going to give us access to some methods such as stringify which we're going to be using here and what this will do is it will turn any javascript into json so we can pass our to-do's in and they will be converted into json and after that we can take our local storage and we can use the set item method and this method takes in two values the first is going to be a string for where we can access this data and so again this is arbitrary i'm just going to call it to do's you can feel free to call it whatever you want here but it's just a way to pull up our data later and we'll also add a second value with our temporary json value here and we can even rename this temp if we wanted to just not to just so we don't confuse ourselves with this uppercase json so we've got our temporary value here and after that so this is how we save our data into local storage what if we want to retrieve it because if we refresh the page we're going to need to load that data so above this use effect or below it we're going to add another react.use effect hook and this time we'll leave the array empty because we only want to run this once when we load the page and what we can do here is we can say we'll use another const and we'll we'll create another temporary variable and we will access the local storage with get the get item method and this get item method takes in one argument and that is simply the string that we associated this data with earlier so it'll be to do's in this case and now we are going to need to parse this data because this temp is a json is in json but we're going to want it in javascript so we could say we'll say cons loaded to do's we'll make a new variable and we will use the json.par method on our temp value and now that we've got our loaded to-do's in we actually don't want to set them yet because we need to check to make sure there actually are loaded to do's if this is the first time a user is using this application we don't want to set any to do's so let's go ahead and we'll say if loaded to do's just to make sure we have something there then we can say set to dues to our loaded to-do's awesome now if we give it a save in a refresh we should have our application working let's see if it does so we have a value here i think that was from my cache from earlier but i'm going to delete this we'll add a another to do this one says eat pizza now if we refresh we have eat pizza again and so also if we complete it give it a refresh we'll see our our to-do is completed if we edit it go back to eat cake we'll submit our edits if we refresh it'll still say e-cake and again we can delete it refresh and it's empty so here we go we've got a working to-do list with lots of features um i hope you got something out of this i mean we use react use date react use effect and and a lot of little react form form logic and and patterns here so hope you enjoyed it if you did go ahead and give the video a thumbs up if you want to see more videos like this go ahead and subscribe to the channel making we're making more videos all the time and thanks for watching and i hope you have a great day

Channel: Code Boost

Views: 12,488

Rating: 4.9732442 out of 5

Keywords: React, todo list, Hooks, JavaScript

Id: EbnmosN64JQ

Length: 38min 5sec (2285 seconds)

Published: Mon Nov 30 2020