{label}
{description}
{todo.text}
);
}
function TodoList({ todo, setTodos}) {
const [newTodo, setNewTodo] = React.useState('');
const addTodo = () => {
if (newTodo.trim() === '') return;
const newTodoItem = {
id: Date.now(),
text: newTodo,
completed: false
};
setTodos([...todos, newTodoItem]);
setNewTodo('');
};
const toggleTodo = (id) => {
setTodos(todos.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
};
const deleteTodo = (id) => {
setTodos(todos.filter(todo => todo.id !== id));
};
return (
Todo List
setNewTodo(e.target.value)}
placeholder="Add a new todo"
className="flex-grow p-2 border rounded-l"
/>
{todos.length > 0 ? (
todos.map(todo => (
toggleTodo(todo.id)}
onDelete={() => deleteTodo(todo.id)}
/>
))
) : (
No todos yet!
)}