REACT Todo List Application

A simple React To-Do List application using functional components and hooks. It allows users to add, mark as complete, and remove tasks. I’ll use Tailwind CSS for styling.

Steps to Set Up:

1. Create a new React app:

   npx create-react-app todo-app
   cd todo-app
   npm start
   

   Try It Now

2. Replace the contents of src/App.js with the following Code

   import React, { useState } from "react";
   import { v4 as uuidv4 } from "uuid";
   
   function App() {
     const [tasks, setTasks] = useState([]);
     const [task, setTask] = useState("");
   
     const addTask = () => {
       if (task.trim()) {
         setTasks([...tasks, { id: uuidv4(), text: task, completed: false }]);
         setTask("");
       }
     };
   
     const toggleTask = (id) => {
       setTasks(
         tasks.map((t) =>
           t.id === id ? { ...t, completed: !t.completed } : t
         )
       );
     };
   
     const removeTask = (id) => {
       setTasks(tasks.filter((t) => t.id !== id));
     };
   
     return (
       <div style={{ textAlign: "center", marginTop: "50px" }}>
         <h1>To-Do List</h1>
         <input
           type="text"
           value={task}
           onChange={(e) => setTask(e.target.value)}
           placeholder="Add a new task..."
         />
         <button onClick={addTask}>Add</button>
         <ul style={{ listStyle: "none", padding: 0 }}>
           {tasks.map((t) => (
             <li key={t.id} style={{ textDecoration: t.completed ? "line-through" : "none" }}>
               <input type="checkbox" checked={t.completed} onChange={() => toggleTask(t.id)} />
               {t.text}
               <button onClick={() => removeTask(t.id)}>❌</button>
             </li>
           ))}
         </ul>
       </div>
     );
   }
   
   export default App;
   

   Try It Now

Features:

✔ Add tasks
✔ Mark tasks as completed
✔ Delete tasks