import React, { useState, useEffect } from 'react';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import './[Link]';
function App() {
// State to manage tasks
const [tasks, setTasks] = useState([]);
const [editingTask, setEditingTask] = useState(null);
// Load tasks from local storage on initial render
useEffect(() => {
const savedTasks = [Link]([Link]('tasks'));
if (savedTasks) {
setTasks(savedTasks);
}
}, []);
// Save tasks to local storage whenever tasks change
useEffect(() => {
[Link]('tasks', [Link](tasks));
}, [tasks]);
// Function to add a new task
const addTask = (task) => {
setTasks([...tasks, task]);
};
// Function to delete a task
const deleteTask = (id) => {
setTasks([Link]((task) => [Link] !== id));
};
// Function to start editing a task
const editTask = (task) => {
setEditingTask(task);
};
// Function to update a task
const updateTask = (updatedTask) => {
setTasks([Link]((task) => ([Link] === [Link] ? updatedTask :
task)));
setEditingTask(null);
};
return (
<div className="App">
<h1>Task Manager</h1>
<TaskForm addTask={addTask} editingTask={editingTask} updateTask={updateTask}
/>
<TaskList tasks={tasks} deleteTask={deleteTask} editTask={editTask} />
</div>
);
}
import React, { useState, useEffect } from 'react';
function TaskForm({ addTask, editingTask, updateTask }) {
const [task, setTask] = useState({ title: '', id: null });
// Update form when editingTask changes
useEffect(() => {
if (editingTask) {
setTask(editingTask);
} else {
setTask({ title: '', id: null });
}
}, [editingTask]);
// Handle form submission
const handleSubmit = (e) => {
[Link]();
if ([Link]()) {
if (editingTask) {
updateTask(task);
} else {
addTask({ ...task, id: [Link]() });
}
setTask({ title: '', id: null });
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={[Link]}
onChange={(e) => setTask({ ...task, title: [Link] })}
placeholder="Enter task"
/>
<button type="submit">{editingTask ? 'Update' : 'Add'} Task</button>
</form>
);
}
export default TaskForm;
import React from 'react';
import TaskItem from './TaskItem';
function TaskList({ tasks, deleteTask, editTask }) {
return (
<div>
{[Link] === 0 ? (
<p>No tasks available</p>
) : (
[Link]((task) => (
<TaskItem key={[Link]} task={task} deleteTask={deleteTask}
editTask={editTask} />
))
)}
</div>
);
}
export default TaskList;
import React from 'react';
function TaskItem({ task, deleteTask, editTask }) {
return (
<div className="task-item">
<span>{[Link]}</span>
<button onClick={() => editTask(task)}>Edit</button>
<button onClick={() => deleteTask([Link])}>Delete</button>
</div>
);
}
export default TaskItem;
.App {
font-family: Arial, sans-serif;
text-align: center;
}
form {
margin: 20px;
}
input[type='text'] {
padding: 8px;
font-size: 16px;
}
button {
margin-left: 10px;
padding: 8px;
font-size: 14px;
cursor: pointer;
}
.task-item {
display: flex;
justify-content: space-between;
margin: 10px 0;
}
.task-item button {
margin-left: 5px;
}
