React Course: To Do App Example, Update: Editing Tasks

In this course, we will create a simple To Do app using React. We will delve into how to add the functionality to modify tasks. Don’t worry; I will explain step by step from the basics so that even those who are new to React can understand.

1. Introduction to React

React is a JavaScript library for building user interfaces. It was developed by Facebook and helps easily create dynamic web applications on a single page. One of the biggest advantages of React is its component-based structure. This enhances code reusability and makes maintenance easier.

1.1 Components

In React, everything is made up of components. A component can be thought of as an independent block that makes up part of the screen. Each component can have its own state and props, allowing it to pass data back and forth with parent components.

2. Setting Up the Basic Structure of the To Do App

First, we will set up the basic structure of the To Do app. Please follow the steps below.

2.1 Creating the Project

npx create-react-app todo-app

The above command creates a new React project. The necessary files will be generated inside a folder called todo-app.

2.2 Creating the Basic Component Structure

Create a Todo.js file inside the src folder and write the basic structure as shown below.

import React, { useState } from 'react';

const Todo = () => {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const handleAdd = () => {
        if (!inputValue) return;
        setTodos([...todos, { text: inputValue, isEditing: false }]);
        setInputValue('');
    };

    return (
        
            To Do List
             setInputValue(e.target.value)} />
            
            
                {todos.map((todo, index) => (
                    {todo.text}
                ))}
            
        
    );
};

export default Todo;

3. Adding Task Modification Feature

Now, let’s add the task modification feature to the To Do app. We will implement a way for users to modify an item when they click on it.

3.1 Adding State Management

To add state management functionality, we need to include an edit mode for each task item. Modify the Todo.js file as shown below.

const handleEdit = (index) => {
    const updatedTodos = todos.map((todo, idx) => {
        if (idx === index) {
            return { ...todo, isEditing: !todo.isEditing };
        }
        return todo;
    });
    setTodos(updatedTodos);
};

const handleUpdate = (index, newText) => {
    const updatedTodos = todos.map((todo, idx) => {
        if (idx === index) {
            return { text: newText, isEditing: false };
        }
        return todo;
    });
    setTodos(updatedTodos);
};

3.2 Creating the Edit UI

Now we need to create an edit UI so that users can easily modify tasks. Insert the following code inside the return statement.

{todos.map((todo, index) => (
    
        {todo.isEditing ? (
            
                 handleUpdate(index, e.target.value)} 
                />
                
            
        ) : (
             handleEdit(index)}>{todo.text}
        )}
    
))}

3.3 Complete Code

Now the complete code is as follows.

import React, { useState } from 'react';

const Todo = () => {
    const [todos, setTodos] = useState([]);
    const [inputValue, setInputValue] = useState('');

    const handleAdd = () => {
        if (!inputValue) return;
        setTodos([...todos, { text: inputValue, isEditing: false }]);
        setInputValue('');
    };

    const handleEdit = (index) => {
        const updatedTodos = todos.map((todo, idx) => {
            if (idx === index) {
                return { ...todo, isEditing: !todo.isEditing };
            }
            return todo;
        });
        setTodos(updatedTodos);
    };

    const handleUpdate = (index, newText) => {
        const updatedTodos = todos.map((todo, idx) => {
            if (idx === index) {
                return { text: newText, isEditing: false };
            }
            return todo;
        });
        setTodos(updatedTodos);
    };

    return (
        
            To Do List
             setInputValue(e.target.value)} />
            
            
                {todos.map((todo, index) => (
                    
                        {todo.isEditing ? (
                            
                                 handleUpdate(index, e.target.value)} 
                                />
                                
                            
                        ) : (
                             handleEdit(index)}>{todo.text}
                        )}
                    
                ))}
            
        
    );
};

export default Todo;

4. Conclusion

Congratulations! You have now created a To Do app using React and added the functionality to modify tasks. Through this course, you have understood the basic concepts of React and learned how to write code through practice. In the future, try adding more features through more complex state management or integration with various libraries.

5. Next Course Preview

In the next course, we will discuss how to add additional features to the To Do app or manage pages using React Router. We look forward to your expectations!