Hello! In this post, we will take a closer look at how to implement the task addition feature while creating a simple To Do app using React. This tutorial is designed for those who have a basic understanding of React and will provide useful information for intermediate and advanced users as well. We will start with the basics of React and explain the step-by-step process of completing the app.

1. Introduction to React

React is a JavaScript library developed by Facebook for building user interfaces. React helps build efficient web applications by creating reusable UI components.

2. Setting up the project

To create a To Do app, we will first set up a new project with React. Follow the steps below:

npx create-react-app todo-app

After entering the above command in the terminal, the basic structure of the React app will be created. To navigate to the created directory, enter the following command:

cd todo-app

3. Installing required packages

Our To Do app will need a form for the user to input and add tasks. We will be using the useState and useEffect hooks for this. No additional packages need to be installed, but you may consider using additional libraries to enhance the project.

4. Setting up the basic structure

Create a folder named components inside the src directory and create two component files named TodoList.js and AddTodo.js inside it.

TodoList.js

import React from 'react';

const TodoList = ({ todos }) => {
    return (
        

            
Todo List
            

                {todos.map((todo, index) => (
                    
{todo}
                ))}
            
        
    );
}

export default TodoList;

AddTodo.js

import React, { useState } from 'react';

const AddTodo = ({ addTodo }) => {
    const [inputValue, setInputValue] = useState('');

    const handleChange = (e) => {
        setInputValue(e.target.value);
    }

    const handleSubmit = (e) => {
        e.preventDefault();
        if (inputValue) {
            addTodo(inputValue);
            setInputValue('');
        }
    }

    return (
        

            
            Add
        
    );
}

export default AddTodo;

Modify App.js

We will add the provided TodoList and AddTodo components to App.js. Modify the content as follows:

import React, { useState } from 'react';
import TodoList from './components/TodoList';
import AddTodo from './components/AddTodo';

const App = () => {
    const [todos, setTodos] = useState([]);

    const addTodo = (todo) => {
        setTodos([...todos, todo]);
    }

    return (
        

            
Todo List App
            
            
        
    );
}

export default App;

5. Running the app

Now let’s run the app. To run the development server, enter the following command:

npm start

When you navigate to localhost:3000 in your browser, you will see a simple To Do app with the task addition feature.

6. Expanding features

We have implemented the basic task addition feature. Now we can enhance the app by adding a few more features. For example:

• Task deletion feature
• Feature to mark tasks as completed
• Task editing feature

Adding these features will allow users to use the To Do app more efficiently.

6.1 Adding Task Deletion Feature

The task deletion feature will help users easily remove completed tasks. Modify TodoList.js as follows:

import React from 'react';

const TodoList = ({ todos, removeTodo }) => {
    return (
        

            
Todo List
            

                {todos.map((todo, index) => (
                    

                        {todo}
                         removeTodo(index)}>Delete
                    
                ))}
            
        
    );
}

export default TodoList;

Now we need to implement the functionality to delete a task by adding the removeTodo function in App.js.

const removeTodo = (index) => {
    setTodos(todos.filter((_, i) => i !== index));
}

Finally, we will pass the removeTodo function when calling the AddTodo and TodoList components.

<TodoList todos={todos} removeTodo={removeTodo} />

6.2 Adding Feature to Mark Tasks as Completed

Let’s now add the feature to mark tasks as completed. Modify TodoList.js again to add a checkbox.

import React from 'react';

const TodoList = ({ todos, removeTodo, toggleTodo }) => {
    return (
        

            
Todo List
            

                {todos.map((todo, index) => (
                    

                         toggleTodo(index)} 
                        />
                        {todo.text}
                         removeTodo(index)}>Delete
                    
                ))}
            
        
    );
}

export default TodoList;

Now we need to modify the todo object to include the isCompleted property along with the text. Modify the addTodo function in App.js to include this functionality.

const addTodo = (text) => {
    setTodos([...todos, { text, isCompleted: false }]);
};

We also need to add the toggleTodo function.

const toggleTodo = (index) => {
    const newTodos = todos.map((todo, i) => 
        i === index ? { ...todo, isCompleted: !todo.isCompleted } : todo
    );
    setTodos(newTodos);
};

7. Conclusion

We have created a simple To Do app using React. The features we have implemented include adding, deleting, and marking tasks as completed. I hope this tutorial has helped you understand the basic usage of React and the data flow between components.

You can continue to enhance your app by adding various features in this way or by improving styling using CSS. This will help deepen your understanding of React and lay the foundation for utilizing it in real projects.

Thank you. In the next tutorial, we will explore more feature expansions and refactoring methods. Wishing you success in your React learning journey!