ReactJs

Todo In React

full-width

 




import { useState } from "react";
// const Task = [
// {
// id: 1,
// title: "First Task",
// },
// {
// id: 2,
// title: "Second Task",
// },
// {
// id: 3,
// title: "Second Task",
// },
// ];

function App() {
const [task, setTask] = useState([]);
const [onAddTask, setOnAddTask] = useState("");
const [isTaskComplete, setIsTaskComplete] = useState(false);

// Update STATE
const [isUpdate, setIsUpdate] = useState(false);
const [updateValue, setUpdateValue] = useState({ id: null, title: "" });

// const neObj = { id: Date.now(), title: onAddTask };
const neObj = { id: task.length + 1, title: onAddTask };

//Add Task
const addTask = (e) => {
e.preventDefault();
setTask([...task, neObj]);
setOnAddTask("");
};

//Delete Task
const deleteTask = (id) => {
setTask(task.filter((item) => item.id !== id));
};

// Task Complete
const taskComplete = (id) => {
setIsTaskComplete((task) => ({ ...task, [id]: !task[id] }));
};

//Update Task
const updateTask = (task) => {
setIsUpdate(true);
setUpdateValue({ id: task.id, title: task.title });
};

const handleUpdate = (e) => {
e.preventDefault();
const index = task.findIndex((item) => item.id === updateValue.id); //Find Index

const updateTask = [...task];
updateTask[index] = { ...updateTask[index], title: updateValue.title };
setTask(updateTask);
setOnAddTask("");
setIsUpdate(false);
};

return (
<>
<div className=" mx-auto bg-slate-600/30 w-[600px] mt-8 pb-12 shadow-sm shadow-zinc-50">
<h2 className="text-white text-center pt-5 text-2xl font-bold mb-5">
{" "}
Todo App
</h2>

<div className="flex items-center justify-center">
{isUpdate ? (
<form onSubmit={handleUpdate}>
<input
type="text"
placeholder="Update Task"
className="pl-2 outline-none"
value={updateValue.title}
onChange={(e) =>
setUpdateValue({ ...updateValue, title: e.target.value })
}
/>
<button className="bg-green-600 px-8 text-white hover:bg-green-700">
submit task
</button>
</form>
) : (
<form>
<input
type="text"
placeholder="Add Task"
className="pl-2 outline-none"
value={onAddTask}
onChange={(e) => setOnAddTask(e.target.value)}
/>
<button
className="bg-green-600 px-8 text-white hover:bg-green-700"
onClick={addTask}
>
submit task
</button>
</form>
)}
</div>

{/* LIST IS HERE */}
{task &&
task.map((item) => (
<div
key={item.id}
className="flex items-center justify-between bg-blue-700 w-[390px] mx-auto mt-2"
>
<span>
<p
className={`pl-2 text-white text-sm ${
isTaskComplete[item.id] ? "line-through" : ""
}`}
>
{item.title}{" "}
</p>
</span>

<div>
<button
className="bg-green-600 text-white px-3 mr-1 hover:bg-green-500 "
onClick={() => taskComplete(item.id)}
>
✔️
</button>
<button
className="bg-pink-900 text-white px-3 hover:bg-green-500"
onClick={() => updateTask(item)}
>
✏️
</button>

<button
className="bg-red-600 text-white px-3 ml-1 hover:bg-green-500 "
onClick={() => deleteTask(item.id)}
>
🚮
</button>
</div>
</div>
))}
</div>
</>
);
}

export default App;

Tags: