Complete React Tutorial (& Redux ) #24 - Todo App (part 2)

Key Takeaways

all right then welcome back gang we're halfway through this Tod do application so far we can delete these things but we need some kind of form to add a new component as well so we'll do that now first of all we need to create a component for that form so new file inside the source folder we'll call this add form. JS all right so what kind of component does this need to be well we need a local state in the component to store what are user types into the input field and since we need State this should be a class-based component so we need to import a couple of things then first of all react and also we need to import components from react all right so now let's create this class class and we'll call this add to do and we'll say extends component to inherit the functionality of a component in react okay let's call this add too instead of add Todd and then in here first of all we'll do our render method to render the jsx template we'll return that here and inside we'll do a div first of all then the form so the form right here this is ultimately going to have a submit event attached to it so we'll say on submit and set that equal to something and we'll come back to this later okay we'll fill this in with a function later on now inside that form we only need one input field for what a user wants to add as the next to do but we will have a label as well we don't need the four we'll leave that out and inside we'll say add new too like so okay so the input field is going to be of type text and we also need an onchange event handler which is going to fire when a user types into this input field whenever the text inside it changes okay all right so after that we'll do our state first of all up here and then below that we'll do our Handler functions so let's handle this one first of all I'm going to create a function called handle change so handle change is going to take in the event object and inside what do we want to do well we just want to set the state so that the content here matches the content in the state so first of all let's create that content property and set it equal to an empty string then inside handle change whenever this changes right here we want to update this property so we'll say this do set State and inside we want the content to be equal to e. target. Val whatever is in here at the time make sense so now this is being kept in sync with whatever's in here all right so let's add that in this do handle change now we need one for this so we'll create one called handle submit like so and that is also going to take in the event object and inside what do we want to do well first of all we want to prevent the default action of a form being submitted which is to refresh the page so we'll say e do prevent default like so and then what we want to do is actually submit this to do so that it outputs it to the Dom now we can't do that at the minute because we need a function in here to do that so for now what we'll do is log this new Todo to the console so we'll say console. log and we'll just say this do state which is going to be this thing right here all right so let us now Nest this component inside the app.js now to do that we have to export it first of all so we export add to do and save it and this is going to be default by the way okay and then in app.js we want to import it so we'll import add Todo from SL add Todo like so okay so we have that component to use in here now and we'll Nest it down here so underneath the to-dos we'll say add to-do like so all right so let's just preview this for the time being and I can see we get an error it says can't resolve add too so let's check out what's going on and that's because we've called it ad for form so let's rename that to add to do instead all right so save that and let's see we still get an error so we need to reference the submit Handler over here so we'll say this do handle submit to do that easy to forget these things and underneath we can see now we have this form so let's add something in we'll just say make the bed press enter and now we get this logged to the console cool so this is working but really we don't just want to log it to the console we want to add it to this list over here so how are we going to do that well to do that we need to make a function inside the root component right here which is going to interact with the state and add that to do to this property right here this array so let's create that function first of all now that function is going to be called add too and we'll set that equal to a function which takes in the new too because we want to add it to the list and inside this function we need to somehow take this to-do and add it up here but before we do that we need to call this function from this component right here the form so we'll pass it as a prop we'll say down here add to do and then add to do is going to be equal to this do add too all right so we've passed it down into this component we have it now on the props we automatically get the prop object in class based components remember so in here instead of logging this to the console we'll say this do props do add to do to call that function and we'll pass this do state into that function so we're passing this object with the content into this function now we receive that object this new Todo over here and then we can do something with it ideally add it to this array so before we do that we need to generate some kind of random ID so we'll say down here to-do do ID so we're just adding an ID property to the to-do we receive and we'll set it equal to math. random so I know it might not always be unique we have a very small chance of getting the same one when we add two to-dos but I think this will do for now later on we'll use randomly generated IDs by data bases okay so now we'll say let toos which is the new array that we're going to create based on this one remember we can't alter this directly so we're going to say this is equal to the old array and we use the spread operator to do this say this do state do todos so what we're doing here is creating a new array and then inside that array we're dumping the contents of this array right here we're using the spread operator to get each individual item and empty them into this array then we want to add on the new item which is to do the object we received right here and attached an ID to so now we have a new array we've not altered this one and the new array is stored inside here so now what we need to do is set the state we say this do set State and inside this we want to update the to-dos to equal the new to-dos we have right here again key value both the same name so we can shorten this and that does the same thing save it and let's see if this works all right so make the bed yep it works but what would be cool is if this thing right here emptied when we added it so that if we want to add a new one we don't have to delete all this stuff so very simple to do that all we need to do is go to our add to-do component right here and when do we want to empty that field well when a user submits so inside this thing right here so all we need to do down here is say this dot set State and inside that we want to set the content to be equal to nothing now this isn't going to do anything yet it's just going to reset the state after we submit it so I can show you this if I do a lot of junk and do that it doesn't do anything with this it doesn't delete it but now we're resetting the state inside this component so at this moment in time the state is empty it's just an empty string right so now what we can do is set the value directly of this input field equal to the state so that when it empties this empties as well so we can do that by saying value is equal to this do state do content like so so if we save that now and view this in a browser then if we say buy more milk enter it goes up there but now we don't have this stuff down here so I can add a new one make the bed my days are so interesting and it adds it up there now if we want to delete these we still can it's all working absolutely fine so there we go my friends two videos and we've created a very simple Todo application in react