ToDo List
ToDo List : Créer une application permettant d'ajouter des tâches à faire, de les marquer comme terminées et de les supprimer.
import React, { useState } from "react";
const TodoList = () => {
const [tasks, setTasks] = useState([]);
const [inputValue, setInputValue] = useState("");
const addTask = () => {
if (inputValue.trim() !== "") {
setTasks([...tasks, { id: Date.now(), text: inputValue, completed: false }]);
setInputValue("");
}
};
const toggleTaskCompletion = (id) => {
const updatedTasks = tasks.map(task => {
if (task.id === id) {
return { ...task, completed: !task.completed };
}
return task;
});
setTasks(updatedTasks);
};
const removeTask = (id) => {
const updatedTasks = tasks.filter(task => task.id !== id);
setTasks(updatedTasks);
};
return (
<div>
<h1>Todo List</h1>
<input
type="text"
value={inputValue}
onChange={(e) => setInputValue(e.target.value)}
placeholder="Add a new task"
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map(task => (
<li key={task.id} style={{ textDecoration: task.completed ? "line-through" : "none" }}>
<span onClick={() => toggleTaskCompletion(task.id)}>{task.text}</span>
<button onClick={() => removeTask(task.id)}>Remove</button>
</li>
))}
</ul>
</div>
);
};
export default TodoList;