React Todo List App Tutorial - Beginner React JS Project Using Hooks

yo what is good everyone so today i'm going to show you how i created this to do app in react so right now here i am and if i go ahead and let me refresh the page you can see that it auto focuses on refresh so now i can just go ahead and just type in anything let's say walk the dog and then press enter and as you can see the row shows up and let me add another one let's say wash the dishes press enter and you can see that the rows actually changed color which i had a custom css class to that and then also i can add here's the um let's do watch the car boom and the most important one let's say like and subscribe boom and you can see that they have four different colors and if i were to sit here and just type in infinitely it goes to infinity and beyond and then here we have the little x so i can delete to do's and then also if i want to go ahead and let me let's say completed so i can go here and go complete boom i did this and then also if i go ahead let me erase really quick i can actually edit them as well so i go let's say let's say instead of walking the dog let's go ahead i click on the edit button it autofocuses too which is pretty cool so i don't actually have to click into the form i can just start typing and let's just say walk the cat and then i just press enter and boom so pretty simple nothing too fancy typical to do app but i made it with react and react hooks and i mainly used use state use effect and then i used use wrap as well so if you want to learn how i created this and definitely watch this video all the way to the very end without further ado let's hop into my code editor and let me show you how i made this all right so very first thing is i'm going to open up my terminal and i'm going to go ahead and type in npx space create dash react dash app and then let's call this react dash to do app and let me just put v1 and then youtube at the end you name whatever you want to but that's what i'm naming it for this example and go ahead and press enter and while that loads i'm gonna go ahead and wait for this and then i'll see you once it gets completed alright now i'm gonna go ahead and type in cd and then whatever you named your file so mine is react to do app v1 and then just youtube here yt press enter and then i'm going to go ahead and type in code dot so if you don't have this already installed then go ahead and just quick google search will show you how to set it up but this automatically opens up my vs code editor and then i can go ahead and start editing this now here i'm going to go ahead and since we already have this code up might as well just use the terminal here so i'm going to do the shortcut key i'm going to do command j on my keyboard open up the terminal and then let me scroll this up really quick and let me make this much bigger and then i'm going to go ahead and if you have yarn then you already know how to do it but if you don't mine says yarn star so whatever yours says most likely will say npm start if you don't have yarn but i'm using yarn so i'm just going to go ahead and say yarn start and then if you don't have yarn just say npm start and here i have this error that pops up so let me copy this code really quick right there and then go over here and let's create a new file called.env and only do this if you have an error if yours automatically loads up then you can ignore this step and then i'm just going to go press the up arrow again brings back yarn starts and this should load up the page i have the app already running so let me just type y and here we go it is up and running with the icon so everything's good to go so if you already made it out before you already know the drill but let me just shrink this really quick and let's go to src and let's clean up something so go and delete these three files right here so i'm gonna click on setup test hold shift and then select up to logo and delete all those three files here index.css i'm delete that too and then let's get rid of app.test.js and we should be solid with these three and let's go ahead and go to app.js and let's clean out this middle section here and let me just put here and be like to do app save it and currently we have to get rid of this logo line here save that there and then also go to index.js let me get rid of this bottom code here and get rid of this line here and then the css index get rid of that line as well save it and boom we are good to go all right so pretty much this code here we don't really need this but uh let me just command a delete all of it and then let's go app.js and let me put the class name let's change it to to do app for now let me save that really quick and then let's just uh go ahead and create our components folder so first thing first let's go to src right click this let's go new folder and then components let's name it that's and inside of this folder we're just gonna do three files for this project feel free to uh structure this however you like but this one's pretty small so i'm just gonna go and create our first component let's just call this to do dot js and let's go right click components again and let's create another one let's call this to do form dot j yes and then let's quite click this again and let's do to do list dot js all right so let's start off with let's see which one's the best let's do form first so let's go to form and here's a cool snippet you can install if you don't have this go to this little icon here type in es7 or react snippets you usually be able to find it with that and just install this one right here the ds like 1.7 mil downloads install this one because it's going to save your life when we start actually coding things out so i'm going to go back here to do form let me get rid of this real quick all right so here i am on to do form and pretty much if you have that installed all you can do is type in rfce and you can see it automatically loads i can just press enter and boom we just got import react from react exports it and a crazy function here so that's pretty clean and now i want to go ahead and let's return some stuff so we're going to be setting state so let's actually go ahead and uh import you state here and then underneath that let's go ahead and just say this is the state so it's going to say const and it's an array in the first value we're going to call it the input so essentially the value of the states and then here's the function that will update this value so let's go ahead and just call this set inputs and then let's set this equal to use state and for now let's leave it to empty string we're gonna add this later but let's keep it there and let's go ahead and let me shrink my side real quick so you can see it better now in here what i want to do is actually create our form so let's just go ahead and say form tab out and then in here let's just call this classname equals to to do dash form now inside of this form let's go ahead and just create a basic input so let me just say see inputs and i say type text let's do uh placeholder equals to let's just say add a to do and then let's put the value let's set that equal to curly braces in order to be to the input and then let's set the name equals to text just did not me do that here we go and then let's do class name equal to to do dash input now we add a bunch of stuff to this file but uh right now let's just keep it basic just so we can see what's going on right now and then for the bottom let's just put a button and let's just say class name equal to to do dash button all right and then in here i'm going to say add to do now let's save this now command b now i want to import this to do form into the app.js just so we can see it so let's just do opening to do form and then it's cool a trick if you press enter when it's highlighted like this it automatically imports it and if it didn't work for you you can press control space does the exact same thing and then press enter and automatically imports it so especially if you have like a million folders and files it just copies up perfectly for you let's hit save here and boom all right now the input is there and we got the little button so right now nothing is working but it's just a start now what i want to do is go back to this form and if you notice when i click on it it's refreshing and i do not want that so let's go ahead and let's add some functions on here and let's do the first one let's just go and create the handle submit so let's just say const and let's do handle submit you can name this whatever you want to but i'm gonna set this equal to e and then the arrow function and we're gonna say e dot prevent default so e dot prevents kind of the default and then parentheses here now if i save this nothing's gonna happen because we need to add this actually to the form as an on submit function so i'm gonna say on submits equals to curly braces and i'm going to put the name of the function we just made which was handle submit all right so save this here and now when i click it voila nothing is changing all right perfect and then now underneath this handle submit i'm going to add props because eventually i'm going to create or actually already have the components but i'm going to add more data into the other components and then this is basically going to allow us to access it and then you'll see it once we have everything implemented but i'm going to say props dot on submit and then we say parentheses curly braces i'm going to press enter now i'm going to say id now you could use some separate id generator or whatever you want but for this i'm just going to make this super basic and simple for this tutorial i'm just going to say math.floor and then parentheses math.random parentheses here times it by where's it at here 10 000. so this should generate a random number within the 10 000 or less range and again you can use your own concept but this is basically making it to where the changes of us getting the same id within like the eight choices out of 10 000 is going to be very unlikely so we should be fine there and then we're going to have a text value and i want to set this equal to input which was whatever we end up typing in all right and then after this underneath this i want to actually set the inputs to an empty string because right now if i save this right now nothing's going to happen we need to have props let's pass props here and right now nothing is happening because it's currently set equal to empty right so if i go here and if i just set this to um like this save it you can see that value values there but let's go ahead and let's cancel that out so let's add a handle chain so you can actually see what's happening too and then i'll add this last line of code so that'll make sense so let's go ahead and on the actual input i want to add the handle change so on here just go under anywhere in the input i'll just go under the class name i'm going to say on change equal to curly braces i'm going to create a function and we're going to call this i'm going to call it handle change call whatever you like and then above let's go right below this stain let's create it here so right above this handle chain or handle submit function let's create another one called kant's handle change and then here i want this to basically say the same thing as the handle submit except the inside code is going to be different so i'm going to say here i want to set the input so set input now so now we're actually utilizing this and i want to set this to whatever we type in which would just be e dot target dot value so now if i save this i click here now we can actually type stuff in and then i click add to do and now it's going to say props on submit not a function so again this is going to be added into our code eventually but for right now let me just say here let's go ahead and say set input equal to empty string and i can actually let's see if i come this out really quick save this here so right now if i type in add to do you can see that when i click add to do it essentially makes it invisible so if i were to take this out do it again you can see it's stuck like we type it out to do nothing's happening this line of code right here boom uncomment it now we add whatever we want to and boom now let's actually i'm gonna keep this line uncommented for now but we're gonna go back to it and use that eventually but for now let's go ahead and let's start editing the to do lists because now i want to actually utilize what we have in the form so i'm gonna go back to now the to-do list let me get rid of some of this here all right so now i'm going to do this and let's do the same shortcut i showed you before rfce boom to do list created and here we're going to use state as well so let's go ahead and put use state in the top line and then also i want to import to do form so let's just go ahead and say import to do form from dot slash to do form and eventually we're gonna import the do well let's keep that out for now and now let's go up below function to do and let's add our state so const and then the brackets let's say to do's and then i'm gonna set that to do so set to do's here i'm going to set the equal to use state and again i'm going to pass in an empty array all right so now let's go to the actual return and let me just say h1 here and let's just say what's the plan for today all right and then underneath this h1 let me pass in this to do form and then let me just save it really quickly and then let me command b and now let's go back to app.js and let's just straight up put to do list now so go here to do lists and then it's going to say it's not imported so if you don't notice you can click on the end of it control space press enter boom auto imports and i can get rid of this to do form line for now and you can name these whatever you want to but now you can see we got something going on here all right so now nothing really happening but you can see that's there alright so pretty much basic and now what i want to do is i want to create some functions in this component so that it makes us actually implement the magic of the to do form so here let's create the first one i'm going to call this add to do so you guessed it this is how we're going to add to do's to our things so let's go cons add to do i'm going to set this equal to i'm just passing in to do for the parameter and then arrow function curly braces and now this is some code that i got off stack overflow but in short this allows us so whenever you added to do so let me go back to the original version if i just hit space you can see nothing happens and then again i have to do as well so also if i were to do like this mega space here ge it's still going to fit so this is essentially this line of code you don't have to understand it but just know that this is the way that you can utilize it to make sure that if no one types in a letter it will just not show up so let's do if parentheses and then exclamation mark if to do dot text and then we'll do the straight lines up here so essentially that so it does not equal to do the text or and then here this code so this one's gonna be slash and then shift six so the up arrow and then the other slash facing this way then i'm gonna say s then shift eight which is the times and then dollar sign slash dot test parenthesis to do dot text and that's pretty much it and then i'm going to say curly braces we're just going to return and then now underneath this text or this code right here still inside that's do add to do function i'm going to say const new to do's i'm going to set this equal to an array and i'm going to pass in the to do and then also i'm going to do spread the 2b3 dots here and then just spread in that other to-do's all right and then here let's actually set this now so let's just say set to do's and i want to set the value to the new to-do's and then if you want to check out here value console.log um let's see dot dot to do's we can see some things going on so if i go here add to do nothing's happening right now but let me zoom console and if i were to add something i have to do here and let me see why hold up so right now you can't see anything yet because i need to actually add this onto our to do form so let's go here and go to on submit i'm gonna say that equal to curly braces add to do now let's save this here type in some stuff nothing's happening here yet and now what i want to actually go ahead and is go back to the original form and let's go ahead and uncomment this now so let's go here save this and now if i go here add to do right now now you can see the second time i edit it when i type in the code now it's actually storing our data in the console so now you can see let me let me clear this let me type stuff that makes more sense because you're probably what am i saying all right so hold on all right so now let's be like um let's do walk the dog and it kept all the previous stuff here so let me let me just refresh the browser really quick so it makes more sense let's just say like um walk the dog save here and then let's do wash dishes so now you can see it showcases walk the dog now and then let's do let's just say laundry here so now it stores currently wash the dishes walk the dog you can see the idea it's a random number so that if we're only doing like 10 to do's like there's no way i mean the chance of it matching between 1 and 10 000 it's so slim so that's essentially this line of code right here it's showing the id and then just text it's like the text input so whatever you typed into the input here's the text here so that's essentially what this line of code that we had beforehand why it wasn't showing up and then i'm just passing in all of this stuff here and then also if you wanted to see everything so i just do comma dot dot to do's and now if i add let's just do a b c now you can see it's logging everything in real time which is essentially what we have here and this is just passing it into the set to do's and we're pushing it the new to-do's into here so i'm just updating the value that way so now you can see that visually so let's go ahead and let me exit off here let's get rid of this console.log let me save this and now let's create some new functions that i want to essentially add this to our to do so that's actually let's go to the to do component now and then we can come back because then nothing's gonna make sense right now until we do this but here let's go ahead let's do rfce again press enter command b here i'm going to pass a new state again so let's go up to react let's say use states and then let's go ahead and import to do form 2. so i'm just gonna say import to do form from dot slash to do form and then we're going to actually use react icons on here but let's just wait until i get to that point but let's just go under function to do now i'm gonna say const array i'm gonna say edit i'm gonna call this one edit and i'm gonna set the function name to set edit and then we're gonna say equal to use state and then parentheses and then we're going to pass in the curly braces and i'm going to set the id value to null and then the current value here i'm going to set this to empty string all right now under here let's go ahead and actually edit the uh actual code here so let's go ahead and say in the div let's just call this now i have a difference class name so let me actually here let me do this so that it makes more sense let me just go ahead and inside of this actual here let's see right here on the return so in the first let's just get rid of this completely so this makes more sense here so i'm gonna say return i'm gonna actually map through the to do so that way we can actually go through whatever we have in our array of to do so i'm gonna say to do's dot to do's dot map and then parentheses now i'm in parenthesis again i'm going to pass in to do for parameter and then i'm going to say index let me set this equal to an arrow function and then i'm say parentheses then i'm going to press enter so now that's what i currently have in the code and then here i'm going to create a div so let's say div and then i want to set the class name equal to let's do curly braces now here we're going to create essentially a function that's going to check if to do is completed or not so we'll have this on the actual form let me see if i have it so actually we're gonna have this on the list so what you'll see and once we get to it but uh for now let's just keep it the code in here and let's just go ahead and say to do dot is complete and if it's true we use ternary operators then i want to set the class of this to to to do dash row space complete and then colon else i just want to keep the class just to do dash row so this code is this code right here where it uh changes the background and then it's essentially toggling if it's complete or not so that's that right there and then let's just set the key equal to curly brace of index here and now after this curly brace let's make sure we have the closing div here dip tag and then let's make the actual yeah close div close the div out here and did i miss yeah i put the curly brace on the wrong end should be here all right yeah so here class name should be a curly brace like this and then let me just drag this out you can see it yeah and then key index would be on here so i save this there on separate lines here and it's sub close on automatically but let me uncomment that out again and let's make the dip here all right so now inside of this div let's go ahead and let's pass in the to do text now so i'm gonna say div set the key equal to to do dot id and then this was the way to know what what uh to do item we're actually clicking on and then i'm gonna set an on click function with the curly braces and then i'm gonna say parentheses i'm going to set this equal to an arrow function and then i'm going to say complete to do and then pass in the parentheses the to do id and then let's close this div out here press enter and then here i'm going to do curly braces i'm just going to pass into do dot text and underneath here now this is where i'm going to create a div for the icon so this one's pretty self-explanatory but let's just go ahead and create the div with the class name equal to icons and then inside here we're going to pass in react icon so let me go ahead and let's do command j and then let's click on this plus sign and what i'm going to do is we're going to install this so if you have mpm do npm install react dash icons i'm just going to go ahead and say yarn add react dash icons and press enter alright so now it's installed went over to now have react icons we've never used it before it's just a way to import react icons or pretty much any icon from popular sources without having to sit there and copy the cdn and everything from them so let's go ahead and you can go ahead and search in here i can show you everything but this one's pretty basic so if i were to say like uh let's just say exit or something like this or actually let me do close you can see here you can choose between all these icons here now i already have set icons so to save time let me just hard code those in so make sure life much easier so let me close this out and now here i'm going to say r i capital c close capital c circle and then capital l for the line here and then let's just go ahead and let's just print this out first let's see so right now if i save this is not going to work and actually let's go below this and let's add the um ti edit two so it's capital t capital e and let's close out here so now let's go ahead and see if this works control space press enter yeah sometimes it's not working for me when i try to import it but for now let me just go ahead and type that code in actually up here so let's just say import and we're gonna do curly braces i'm gonna say ri close circle line so whatever we just created for the icon i'm gonna say from quotes react dash icon slash ri and then let me go ahead and do shift alt down arrow copies that line let's change this one to ti edit and then just change the ri to ti and if i save this now let's see if it's showing on to do so we have to actually add to do to or to do list so let's go to to-do list let's go under to do form and let's just say to do close it out and let's make sure i'm ahead control space so auto imported auto import for me and then let's see let's refresh real quick not saying to do is not define and complete to do is not defined so we gotta go into the actual to do's and let's pass those in so let's say to do is equal to curly brace of to do's and then let's do complete to do is equal to curly brace of complete to do save this here refresh and it's saying that in the to do.js so actually let's go back now to do.js and let's go ahead and let's see i do need to create those functions but also let's create it okay let's just restructure this let's do curly braces and let's just say to do's comma completes to do and now let's save it here and then i mistyped something so right now actually we have to create those functions but let me let me see if i can comment this out for right now let's see if this fixes this actually hold on just go here let me comment this out for one second save this right now so completely is not defined so we actually have to create that function so let's might as well just create this right here so let's just go ahead and say const complete to do and set this equal to an id i'm just passing in you can name this whatever you want to that's the arrow function here and then i'm going to say let updated to do's equal to to dos.map and then in parentheses i'm going to say to do and then another arrow function here with the curly braces and i'm going to say if the to do dot id is equal to the id then i say curly brace here then i'm going to set to do dot is complete equal to whatever the opposite of the value is so to do dot is complete this is eventually toggling it between true and false and then here's going to return the to do and then underneath this curly brace parentheses i'm going to set the to do's to updated to do's now let's save this here and now let's go ahead and we add stuff now you can see we have the thing update and then also we have a little icon action going on right here so not much is happening yet but uh let's go back to the to do now and let's just finish up this one so i'm gonna go ahead and on this ri closed circle line let's add an on click so let's say on click equals to curly brace parentheses arrow function here i'm going to say remove to do and then just pass in the to do id so it knows which one we're clicking on and then we have to actually create that function too but um for now let's keep like this and then also class name let's set this equal to delete icon and now let's go ahead and let's just copy this two lines of code here paste this into the second ti edit icon and let's just change the thing from remove to do and let's set change it to set edit now okay so there's updating the state here and then in parentheses you're going to say curly brace i'm going to say id set that equal to do dot id comma and then let's set the value equal to to do dot text and then here let's just change this to edit icon and now what it's going to say is going to say remove to do is not defined so let's go over to up here let's pass in remove to do so let's say remove to do here let's save this here and then let's see i don't have the function so i don't think it should work but let's see yeah right now nothing's happening because saying remove to do is not a function so we gotta go now to to do list and let's just put it in between the add to do and the complete to do so right here i'm inside to-do list in the middle between these two functions now i'm going to create this function here i'm going to say const remove to do i'm going to pass the parameters called id name whatever you want to and then arrow function curly brace here let me say const remove r so short for array so that's equal to the brackets and we're going to pass in the dot dot to do and then we'll say dot filter and then parenthesis and i'm going to pass in to do as the parameter and set this equal to an arrow function and then i'm essentially saying to do dot id and if it does not match here so print exclamation mark equal equals the id and then here i'm going to set the to do's to the removed r so this essentially is checking a c in the actual array the to do and then it's going to basically remove this from the application so if i show you here type it in right now it's not working because we have to actually pass in remove to do here so let's go ahead and say remove to do equals to curly braces remove let me see i cannot type the date move to do and then let's save it and let's see if it works now so boom it vanished like magic now click on edit nothing's happening on the edit because the uh edit function is not created so let's go ahead and let's actually create that so let's just put this underneath let's do this under the remove to do so outside of the below the remove to do function let's just call this const updates to do and actually let me put this below the uh let's put this below the add to do function so let me put some more space you can see what's going on so here's the add to do and then here's the remove to do let's put it here update to do in between that because the code is fairly similar in terms of the logic so let's just say so this eagle two parentheses and then let me just call this let's see let's just say to do id and then let's just call this new value because equal to arrow function curly brace and then we can just copy this code up here because when we update it we want that same logic where if you type like a space or something nothing actually then it won't actually update the to do so then that's under here this is the main code here just saying it's set to do so now we should update the state of the dues by setting it and let's just say the previous so prep for short air function i'm going to say previous.map and then in parentheses i'm going to say item for the parameter and then passing in here and arrow function parentheses i'm going to say item.id if it's equal to the to do id and that's true so whatever we clicked off is true ternary operator here and i know how to get rid of this little pop-up all right yeah and then after the turn operator i want to set it to the new value and if there's no value we'll just set it back to the item and then let's save it here and now it's going to say to do is not define so let's see where am i missing this out let me actually go below down to here and let me add this update to do function so let's say update to do equal to curly brace of updates to do and not saying it's not defined here so let me see what line is that on 19 oh yeah i need to change the due to new value and then also here this one should be new value here save it let's test it out see if it works now so right now it's not working yet believe because we need to add let me go to to do actually and here let me add this so currently we have this edit state now let's go ahead and let's do submit let's create a function called submit update so let's just call this const submit update it says equal to a value just passing in for the parameter and then the arrow function curly brace then i'm going to say update to do and then we're going to pass in edit dot edit dot id and then comma value and then under this i want to set the actual state so set edit parentheses curly braces and we'll set the id to no comma and the value just to empty string and then here let's go underneath this function and say if edit.id is true then we'll just simply return the to do form and then we're going to say edit equals to the edit and then on submit equals to curly brace submit update and then close this out sub closing here i think i have to do form imported let's see update to do is not define let's see where do i add this yeah i need to add it up here to my right here so let's say update to do save it here now let's test it out now see what happens boom add to do actually let me type something that makes more sense okay boom edit this here perfect and then we see here and then close it out all right so now the functionality is pretty much it's already there there's just certain things i need to refactor the code to where it actually looks way better and plus you notice the um the to do is a different color and then also you notice whenever uh the thing is it automatically focuses on there so let's actually let's do that now before i add the styling just so that uh you can actually see this so let's go to let's see let's go to the uh let's go to the to do form so i'm gonna go my to-do form and now what you notice right now the focus meaning like it's clicked isn't currently on the actual input and then also when you go to edit it it's currently not focused either so i want to make it to where i don't even have to click anything i just refresh it and it's automatically there and then also when i click on the update to do it's there too as well so this is simple we can use uh another hook actually use two let's do go to the top and just say import use effect and then also let's import use ref now these are pretty simple but let's go to let's go up below the state here and let's just type in cons and i'll just name this input ref so you can understand it but feel free to name this focus or whatever you want to call this i'm gonna set this equal to use ref and set the current value just to know now under here i'm gonna say use effect okay now i'm passing in the parentheses i'm gonna set an arrow function curly brace here and what i want to do is set input ref dot current dot focus now if you look up use ref you probably see a bunch of uh code tutorials which pretty much the same code here but this is essentially allowing you to focus on whatever you put as the ref so now if i go down to here to the input let's go below the on change right there press enter and i set ref equal to curly braces of input ref save it here now you notice when i just refresh the page it's automatically already there so i can just go ahead and start typing and nothing happens and then also if i click on the edit it automatically does the same thing too which is pretty cool pretty dope to do and wasn't that complicated to actually add in the code and now let's go ahead and let me go back command b so in terms of functionality most of it is there already there is just a few things i need to actually update but for now let me add the css because right now nothing makes sense and you're probably wondering what's going on let me just go ahead and i could actually type this out but let me just copy this from my github so let me just go here and paste this in and then just save this here and now you can see this code here now if you want that i put the link to the css file in the github below or if someone wants to just copy it in the comments section that makes your life so much easier actually up i do will see either way i'll have it to where you can actually get this code and let me go through really quick because there's some things you notice for instance uh like this color coordination where it's showing different colors per row so right now it's typical just flexbox and you know typical css but the main difference is on the those it's do row which is essentially the row with everything inside of it i used and the child and then i did the four and plus one so think of this as essentially zero plus one so one and then one so now four times one is four plus one is five so one two three four five and then two would be was that eight nine so then if i go here so on the ninth one it would be blue again let me see yeah so four five six seven eight nine so you get the math here it's not too complicated you can look into it more if you want to but that's essentially how i colored the rose different colors and then the rest is just basic css so nothing too complicated but that's just a little quick um explanation on that just so that in case you're like how the heck did i do this so right now here's our current thing we got x works at to do works here the closeout part two also for the complete the toggle that was up here just line through opacity here which is let me see if it's on the things on it to do yeah so if to do is complete i'm setting to do row plus this complete class and then that's pretty pretty self-explanatory so in terms of functionality most of it is working the only issue is the one is i want this to be a different to do and then let's see yeah that's the main part and then also yeah i think that's pretty much the main concept here now let's go ahead and let me show you this one's not too complicated because we have most of the logic already here but let me go ahead and let's go to app.jse everything's good here to-do-list looks good here and then let's go to to do form all right so here's where it's it's not too hard to understand this but here let me show you really quick so pretty much we need to create an edit so let's go ahead and i'm going to go to the top of the use state and then instead of saying just empty string i'm just going to say props dot edit and then turn it operator i'm going to say props dot edits dot value and then colon else empty string so here let's go down and let me show you how i added the separate update input form here so in case you want to have different styling so pretty much it's pretty simple but you do curly braces and then we're going to check if the props dot edit if it's true so turn your operator here and if it is true i'm in parentheses i want to return this entire code so let's just go ahead and say command x and paste it in the parentheses right now if that that's the first part so saying if it's true and then say colon else i'm going to say parentheses again and i'm just going to copy and paste the exact same thing again so now you can notice that it's basically saying if you're editing it i want the input form to display the updated input form so i can change this to say um update your item and then let's just change let's see instead of saying i have to do let's just say update so you can see what's going on let me save this here and let's see what's happening here yeah we have to wrap this so let's go ahead and let me put some fragments in between these so and on top of the the input and then below the button and then i need to do it again here so on top of the input and then below the button save this here should work now all right so let me just add random to do and then i click edit and now you can see the update it changed here so now that's super simple and then now i want to do now is just add the class names to here so let's just say on the first to do input i want to add the edit class name and then for the to do button let me add edit here let's save this and let's see what's happening here it's saying that he's a closing tag so what happened did i exit off something yeah i guess it's button this random button attack just popped out of nowhere that's weird all right check it now all right so let's see here edit all right perfect now we got the new custom styling here and then for the second one let's just keep it as same here we should be pretty solid there and then let's go to let's see actually let's test it out make sure everything's working let's see real quick so enter so let me clear this out so now let me just go ahead and refresh the page focus is automatically there walk the dog press enter works fine here let's just say clean car boom completed toggle works toggle works here exit off exit off and then let's go to edit it saves the current value here oh yeah that's one thing i want to show you the code if um if you don't add this up here like if you just set this to an empty string let me just command x and then if you just type in it to do you try to edit it it's just gonna it's gonna clear it out it's gonna set to an empty string so that's why i have this code here so that i wanted to set it to whatever the value is of the to do so that you don't have to retype and plus like if you have like a million to do's it's going to be really annoying to figure it out and then we say edited to do so pretty simple nothing too crazy feel free to refactor this code make it a lot better there what are some uh things i wanted to add in terms of uh customization but it's probably gonna take me way too long for a simple app but in terms of the actual code react this is basically it nothing too crazy so if you did enjoy this video go down below hit that like button subscribe go ahead let me add this up here like and subscribe and comment below alright let me know once you completed that and then also if you are new to the channel i'm pretty much docking myself learning code and just building stuff and sharing it with you guys so if you do want to follow me along that journey then definitely subscribe to the channel and aside from that i will see you in the next video peace

Channel: Brian Design

Views: 122,788

Rating: 4.8351102 out of 5

Keywords: react todo list, react todo list app, react todo app, todo app react, react todo list tutorial, react todo list hooks, react project, react js, react, react js project, react project tutorial, beginner react js project, beginner react project, todo app, todo app list, todo app react js, react tutorial, react js tutorial, react hooks, useref, react useref, react useeffect, react usestate, todo app react hooks, react projects for portfolio, react project for beginners

Id: E1E08i2UJGI

Length: 50min 30sec (3030 seconds)

Published: Sun Aug 23 2020