import React, { useState, useEffect } from 'react';
import TaskForm from './components/TaskForm';
import TaskList from './components/TaskList';
import './App.css';
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 = JSON.parse(localStorage.getItem('tasks'));
if (savedTasks) {
setTasks(savedTasks);
}
}, []);
// Save tasks to local storage whenever tasks change
useEffect(() => {
localStorage.setItem('tasks', JSON.stringify(tasks));
}, [tasks]);
// Function to add a new task
const addTask = (task) => {
setTasks([...tasks, task]);
};
// Function to delete a task
const deleteTask = (id) => {
setTasks(tasks.filter((task) => task.id !== id));
};
// Function to start editing a task
const editTask = (task) => {
setEditingTask(task);
};
// Function to update a task
const updateTask = (updatedTask) => {
setTasks(tasks.map((task) => (task.id === updatedTask.id ? 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) => {
e.preventDefault();
if (task.title.trim()) {
if (editingTask) {
updateTask(task);
} else {
addTask({ ...task, id: Date.now() });
}
setTask({ title: '', id: null });
}
};
return (
<form onSubmit={handleSubmit}>
<input
type="text"
value={task.title}
onChange={(e) => setTask({ ...task, title: e.target.value })}
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>
{tasks.length === 0 ? (
<p>No tasks available</p>
) : (
tasks.map((task) => (
<TaskItem key={task.id} 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>{task.title}</span>
<button onClick={() => editTask(task)}>Edit</button>
<button onClick={() => deleteTask(task.id)}>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;
}
