React Todo List App (Add + Delete using useState)

📌 INTRODUCTION

The Todo List App is one of the most popular beginner projects in React. It helps you understand:

• State management
• List rendering
• Event handling

In this program, we will build a Todo app that:

• Adds tasks
• Deletes tasks
• Displays task list dynamically

👉 This is a must-do project for beginners.

---

📘 PROBLEM STATEMENT

👉 Create a Todo List App in React that allows users to add and delete tasks using useState.

---

💡 CONCEPTS USED

• useState Hook
• List Rendering (map())
• Event Handling
• Controlled Input

---

🧠 LOGIC EXPLANATION

1. Store tasks in an array
2. Take input from user
3. Add task to list
4. Delete task from list
5. Render tasks dynamically

---

💻 PROGRAM CODE

Open src/App.js:

import { useState } from "react";

function App() {
  const [task, setTask] = useState("");
  const [tasks, setTasks] = useState([]);

  const handleAdd = () => {
    if (task.trim() === "") return;

    setTasks([...tasks, task]);
    setTask("");
  };

  const handleDelete = (index) => {
    const newTasks = tasks.filter((_, i) => i !== index);
    setTasks(newTasks);
  };

  return (
    <div style={styles.container}>
      <h1>Todo List</h1>

      <input
        type="text"
        value={task}
        placeholder="Enter task"
        onChange={(e) => setTask(e.target.value)}
      />

      <button onClick={handleAdd}>Add</button>

      <ul>
        {tasks.map((t, index) => (
          <li key={index}>
            {t}
            <button onClick={() => handleDelete(index)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

const styles = {
  container: {
    textAlign: "center",
    marginTop: "50px"
  }
};

export default App;

---

🖥️ OUTPUT

👉 Example:

Input: Learn React
Click Add

Output:
- Learn React   [Delete]

👉 After delete:

(No tasks)

---

🔍 STEP-BY-STEP EXPLANATION

• useState("") → stores input value
• useState([]) → stores list of tasks
• handleAdd() → adds task to array
• handleDelete() → removes task
• map() → displays tasks

---

⚡ ADVANCED FEATURES

1. Add Task IDs

{ id: Date.now(), text: task }

---

2. Add Edit Option

👉 Modify task using index

---

3. Add Completed Toggle

👉 Strike-through completed tasks

---

4. Save to Local Storage

localStorage.setItem("tasks", JSON.stringify(tasks));

---

🎯 WHY THIS PROGRAM IS IMPORTANT

• Real-world project foundation
• Combines multiple React concepts
• Frequently asked in interviews
• Helps in portfolio building

---

🌟 REAL-WORLD USE CASE

• Task management apps
• Daily planners
• Productivity tools
• Notes apps

---

❓ VIVA QUESTIONS (IMPORTANT)

Q1. What is useState?

👉 A hook to manage state in React.

---

Q2. Why use map()?

👉 To display list items dynamically.

---

Q3. What is controlled input?

👉 Input controlled by React state.

---

Q4. Why use key in list?

👉 To uniquely identify elements.

---

Q5. How to delete an item?

👉 Using filter() method.

---

🔗 RELATED POSTS

👉 MCA 168 Full Stack Development Lab Programs List
👉 React Calculator App – Program 17
👉 React Todo Item – Program 12
👉 React useState – Program 6

---

📌 CONCLUSION

The Todo List App is a powerful beginner project that demonstrates how React handles state and dynamic UI updates.

👉 Build this and extend it to create full applications.

---

Further Reading

JUnit Tutorial

How to Master Full Stack Development?

Spring Framework Practice Problems and Their Solutions

30 MCQs on JUnit

From Google to the World: The Story of Go Programming Language

Why Go? Understanding the Advantages of this Emerging Language

Creating and Executing Simple Programs in Go

20+ Interview Questions on Go Programming Language

100+ MCQs On Java Architecture

Java Practice Exercise

• Angular
• ASP.NET
• C
• C#
• C++
• CSS
• Dot Net Framework
• HTML
• IoT
• Java
• JavaScript
• Kotlin
• PHP
• Power Bi
• Python
• Scratch 3.0
• TypeScript
• VB.NET

Princites