To Do Part 2

Last week I started a blog about making a todo list, and we got our app basic setup. To review you can head here, this week I thought we add a little bit more functionality to it. Lets recap what we have so far though…

Ok, as we can all we can do right now is display a list of todos, which is great but let’s add some functionality. First let’s go ahead and add a way to add and remove new todos to our list. In order to create our addTodo function we will pass our content(which is our todo) and set newTodos using the spread operator to pass in the previous todos. We will then go ahead and pass are content(our todo) and setTodos to our newTodos

Second, lets go ahead and create a way to remove todos, in order to do this instead of passing the content, we will go ahead and take the index of the todo we are looking to remove, from there we will something similar as before and take newTodos and spread our previous todos. Instead of using content however we will use the splice method to remove said todo and then setTodos(newTodos)..

Third, let’s go ahead and create a way to access a specific todo when we want to have it deleted. We will create a new function that takes in our todo, index and removeTodo and place a onClick on a button for each todo in order to have the one we want removed…

Let’s also go ahead and create a way to add todos to our list. In order to do this we will create a form, in this form we will have a handleSubmit function that once executed it will add a new todo to our list…

Finally, we can add these new functions to our Todo

At the end we should have something like this…

Not the prettiest, can definitely use some CSS, but I will leave that to you for styling…

Happy Coding!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Gabriel Castro

Full Stack, Software Engineer. Focus in Rails, JavaScript and React.