File size: 1,414 Bytes
ccf1f60 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
import "./App.css";
import { useState } from "react";
import { Task } from "./Task";
function App() {
const [todoList, setTodoList] = useState([]);
const [newTask, setNewTask] = useState("");
const handleChange = (event) => {
setNewTask(event.target.value);
};
const addTask = () => {
const task = {
id: todoList.length === 0 ? 1 : todoList[todoList.length - 1].id + 1,
taskName: newTask,
completed: false,
};
setTodoList(task.taskName !== "" ? [...todoList, task] : todoList);
};
const deleteTask = (id) => {
setTodoList(todoList.filter((task) => task.id !== id));
};
const completeTask = (id) => {
setTodoList(
todoList.map((task) => {
if (task.id === id) {
return { ...task, completed: true };
} else {
return task;
}
})
);
};
return (
<div className="App">
<div className="addTask">
<input onChange={handleChange} />
<button onClick={addTask}> Add Task</button>
</div>
<div className="list">
{todoList.map((task) => {
return (
<Task
taskName={task.taskName}
id={task.id}
completed={task.completed}
deleteTask={deleteTask}
completeTask={completeTask}
/>
);
})}
</div>
</div>
);
}
export default App;
|