Scribd
Upload
9 views

NPX Create-React-App Task-Manager

Uploaded by

maharaju888
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
9 views

NPX Create-React-App Task-Manager

Uploaded by

maharaju888
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 3

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;
}

You might also like