Build a simple to-do app in React (Part 3)
We’re building a simple to-do app. This is the final part of a 3-part series on how to do it. If this is your first interaction with this series you can follow on from Part 1 and Part 2. Just a reminder: you’ll need to have at least some familiarity with HTML5, ES6, and at least some introductory skills in React. In this part, we will finish off our simple to-do app.
Part 3: Add an input field to add new todos to the list.
The app is broken down into 3 parts:
Part 1: Display a list of default todos or a message when all todos are cleared.
Part 2: Delete an item in the list by clicking directly on it.
Part 3: Add an input field to add new todos to the list.
You can also move to a different part of the article if you would like to or find the completed to-do app on my GitHub repository.
Let us resume with our to-do app.
Part 3: Add an input field to add new todos to the list.
Now we’ll create a new component called InputForm.js which will contain our form. This component will have its own state that will be managed internally.
Explanation:
Inside our state, we added content, the value of which is just an empty string. We will change it based off what the end-user types in the input field later. We have also created a form which contains our <input> tag and furthermore, we’ve dictated the type of the input field, and the placeholder for it, and assigned the value of our input field to be the content in our state.
Now, let us go back to our App.js, import our newly created InputForm.js component, and use it in our render() method.
Note: If we look at our app in the browser, we will notice that our input field is not responding to any changes that we type into it. This is because the value has been set to our content in our state which is just an empty string.
To make it responsive as we type in new characters in the input field, we have to go back to our InputForm.js component and add an onChange listener to the <input> tag.
The onChange listener will then call a function, which we can name changeValueHandler. This changeValueHandler function will, in turn, take an event as an argument.
Explanation:
Inside our changeValueHandler function, we call setState to assign the content in our state. This should take the value of whatever is being typed in our input field in the browser. We did so by assigning it to event.target.value.
Our input field will now work correctly.
Submit new todos to the list
Next, we have to ensure that we can submit the form to add a new todo in our list of todos.
We can create a button in our form, and add an onClick listener to it or, we can simply call the onSubmit listener on our <form> tag. In this case, our onSubmit listener will call a function that we can name addValueHandler, which will again take an event as an argument..
Let us look at the code and delve into it further.
Explanation:
There are 3 things that we did inside of our addValueHandler function:
Firstly, we call the preventDefault() method on our event. We do this because by default, React will refresh the page in the browser upon submitting a form through the onSubmit listener. This will lead to losing our state — which has been changed through our changeValueHandler function. We called this through our onChange listener.
Secondly, we call a newly created prop called submitValue with a parameter assigned to it. The parameter is the current state, which refers to the value that the user has typed in the input field.
Lastly, upon successful submission, we set the value of our input field back to an empty string, so that the user can type in a new todo again should he/she wishes to.
Pass submitValue to InputForm
Next, we head back to our App.js component, and pass this new submitValue props to our InputForm.js component there.
submitValue will in turn be assigned to a function which will get called upon submitting the form. We can name this new function addHandler.
Lastly, we have to create the addHandler function and define what it does upon execution. Remember that we have to pass in a newTodo argument to it, which refers to the parameter we set to it in InputForm.js, i.e props.submitValue(this.state).
Explanation:
Again, there are 3 things that we did inside of our addHandler function:
Firstly, we assigned an id to the newTodo that we received, as it only had a content type assigned to it. We use the Math.random() method which will generate a random number for us each time that a new todo is added to the list. For this scenario, Math.random() is highly unlikely to ever produce a duplicate value.
Secondly, we created a new array also named todos and we used the spread operator to clone the todos that exist in our state, in App.js. We then add our newTodo at the end of this new array. We used the spread operator here as it allows us to create a clone of our original state, immutably.
Lastly, we set the state of our App.js to take the new array we just created.
That’s it! The simple to-do app is completed.
Congratulations on building a fully functional To-Do app. I would recommend you to add your own twist to the project and some styling to make it look great.
Part 1: Display a list of default todos or a message when all todos are cleared.
Part 2: Delete an item in the list by clicking directly on it.
You can also find the completed to-do app on my GitHub repository.
Thank you for reading part 3 of this step by step guide on how to build a to-do app in React. I hope you found it to be fruitful in some ways. Please send through your thoughts on the subject and add claps so that other developers can learn to build their own simple to-do list apps in React too.
