To-do list app with React Functional and Class Components

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

Photo by Glenn on Unsplash

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

You cam check out the Class 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 before starting our server, so in your project in your terminal enter the following

yarn start // for those using yarn
npm start // while for those using npm

Now open the App.js file in the src folder then edit it to this 👇🏼

Functional Component (App.js)

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

also replace your styles in App.css as below

App.css

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

http://localhost:3000/

2. Create a To-do and List 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 states in the functional Component using the UseState which is called before the react component is mounted read more on it here,

now let’s update our to-do app with this states before the return statement as shown below also ensure to

import {useState} from React

const [todos, settodos] = useState([]);
const [value, setvalue] = useState("");

now let’s add a function for adding a todo task as shown in the code below

Adding a Todo

• from the above code , we see , I added two states using useState hook, 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 👇🏼

http://localhost:3000/

3. Delete a To-do Task

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

const onDeleteTask = (itemId) => {
  settodos([...todos].filter(id => id.id !== itemId))
}

now update the delete button adding an onClick pointing to this function

const mylist = todos.map((todo) => (
<li className="todo_item">{todo.name}
<button >Edit</button>
<button onClick={onDeleteTask(todo.id)}>Remove</button>
</li>
));

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

http://localhost:3000/

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)

const [editing, setediting] = useState(false);
const [currentid, setcurrentid] = useState("");
const [currentValue, setcurrentValue] = useState("");

• so update your todo template for conditional rendering with the editing state declared above, as the one below

• so next we added the toggle handler (onToggleEdit), it sets editing to true and it takes the current todo object, and store it values in currentid and currentValue.

const onToggleEdit = (todo) => {
 setediting(true)
 setcurrentValue(todo.name);
 setcurrentid(todo.id)
 setcurrentTodo(todo)
};

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

const onEditInputChange = (e) => {
 setcurrentValue(e.target.value);
};

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

const onSubmitEditTodo = (e) => {
 e.preventDefault();
 onEditTodo(currentid, currentValue);
 setediting(false)
};

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

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

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

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

http://localhost:3000/

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

http://localhost:3000/

now we see todo item 1 has been updated 🥳🥳

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

Thanks for your time ♥️

Where to find Me 👇

Here on Medium ♥️

You can also find me also 👉 Githubhttps://github.com/Onlynfk/ Instagram / LinkedIn