To-do list app with React Class and Functional Components

Published in

CodeX

4 min readMar 21, 2022

Hello Everyone 😊, today we would be creating a simple Todo-list app with the ReactJs using its two main components: Functional and Class Components

For this article we will be working with the Class components.

You cam check out Functional Component way here!!

Tools I would be Using:

Visual Studio Code (Text Editor)
Nodejs (npm 8.1.2 +)

Features

Create Task
List Task
Edit Task
Delete a task

So let’s get started!!! 🚀🚀

1. Setup Project

Here we are creating our Project app using the terminal , ensure you have Nodejs and create-react-app installed globally

npx create-react-app <project_name_here>

open the project directory with vscode, now on your terminal start your serverby running the command below

yarn start // for those using yarnnpm start // for those using npm

Now open the App.js file in the src folder you would see the functional component approach👇🏼

Functional Component (App.js)

to change it to a class component simply paste the code below 👇🏼

Class Component (App.js)

Next update the App.js again with this additional template in the return statement

also replace your styles in App.css with below

App.css

now, you can check your browser by running yarn start in your terminal

2. Create a To-do Task and Listing Task

Okay, let’s get into the functionalities, we would be starting with the creating a task. So to begin we would first need to structure our state in the Class Component using the Constructor which is called before the react component is mounted read more on it here,

now let’s update our to-do app as shown as below

App.js (CreateTodo)

from the above code , we see , I added two states to the constructor: value, and todos which will handle the onChange on text input for adding a todo item and store the todos respectively.
also you would notice I added an onAddTask function to handle the logic for adding a todo item, I made it an object, containing a name and an id before its then stored.
then lastly we added an unordered list tag to display the list of todo items

Now refresh your browser and try adding a task to see the result as below 👇🏼

3. Delete a To-do Task

Next let’s add a function to remove a to-do task, so do this follow the code below 👇🏼

App.js (DeleteTodo)

from the above code , I added a function onDeleteTask that takes in the id of the to-do item, filter through the todos then remove the item.
next I added an onClick handler, this.onDeleteTask to the delete button.

Now refresh your browser again and try deleting a task to see the result as below 👇🏼

3. Edit a To-do Task

Now to edit a task,we would add few states, to the Constructor, a editing:false, and states to hold the todo id (currentId) and todo name (currentValue)

constructor() {
super()
this.state = ({
 todos: [],
 value: "",
 editing: false,
 currentid: "",
 currentValue: ""
});

so to update your todo template for conditional rendering with the editing state declared above, paste the code below in your return statement

Todo-template-updated

so next add the toggle handler (onToggleEdit), you see it’s sets editing to true and it takes the current todo object, then store it’s values in currentid and currentValue.

onToggleEdit = (todo) => {
 this.setState({ editing: true })
 this.setState({ currentid: todo.id })
 this.setState({ currentValue: todo.name })}

Next we add the onChange handler for input (onEditInputChange) which simply sets the currentValue to the value type by the user.

onEditInputChange = (e) => {
 this.setState({ currentValue: e.target.value })
}

now add the onSubmit handler (onSubmitEditTodo) to handle submitting the todo item

onSubmitEditTodo = (e) => {
 e.preventDefault()
 this.onEditTodo(this.state.currentid, this.state.currentValue)
 this.setState({ editing: false })}

from the above code, we see it simply gets the currentid and currentValue and pass to the onEditTodo function below ,👇🏼which loops to through all the todos , finds the todo item id and updates its value

onEditTodo = (id, newValue) => {
 this.state.todos.map(todo => {
  if (todo.id === id) {
      todo.name = newValue;}})}

Now to test it update the functions for onClick, and onsubmit handlers as shown below

Todo-template-updated-2

Now let’s try editing a todo our browser as below

now clicking Edit button we see the item, next let’s update it

now we see todo item 1 has been updated 🥳🥳

Got any errors, no worries here is the full source code below 👇🏼

App.js

Thanks for your time ♥️

Where to Find Me 👇

You can follow me here on Medium ❤️

You can also find me on 👉 Github/ Instagram / LinkedIn 🔥