Scribd
Upload
2 views

listcoding

This document contains a React component for a To-Do application that allows users to add, edit, and delete tasks. It utilizes state management with hooks to handle task values and editing states. The component renders a list of tasks and provides input fields and buttons for user interaction.

Uploaded by

kashif m
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

listcoding

This document contains a React component for a To-Do application that allows users to add, edit, and delete tasks. It utilizes state management with hooks to handle task values and editing states. The component renders a list of tasks and provides input fields and buttons for user interaction.

Uploaded by

kashif m
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 2

import './Todolist.

css';
import { useState } from 'react';

function App() {

const [tasks, setTasks] = useState([]);


const [taskValue, setTaskValue] = useState('')
const [isEditing, setIsediting] = useState(false)
const [editingvalue, setEditingvalue] = useState(null);

function handleChange(event) {
setTaskValue(event.target.value);
}

function handleAddtask() {
if (isEditing) {
const index = tasks.indexOf(editingvalue)
if (index !== -1) {
const updatedtask = [...tasks];
updatedtask.splice(index, 1, taskValue)
setTasks(updatedtask)
}
}
else {
if (taskValue !== '') {
setTasks((prevtask) => [taskValue, ...prevtask]);
}
}
setTaskValue('');
setIsediting(false)
}

function handleDelete(task) {
const updatedtaskList = tasks.filter((currentelement) => currentelement
!== task)
console.log(updatedtaskList);
setTasks(updatedtaskList);
}

function handleEdit(task) {
setIsediting(true)
setTaskValue(task)
document.querySelector('.inputText').focus();
let currentlyEditingValue = tasks.find((element) => element === task);
setEditingvalue(currentlyEditingValue);
}

function handlekeyPress(event) {
if (event.key === 'Enter') {
handleAddtask()
}
}
return (

<div >

<ul className='TodoListitemsContainer'>
<div className="heading1">
<h1 >To Do App</h1>
</div>
<input type='text' value={taskValue}
onChange={handleChange} onKeyDown={handlekeyPress} className='inputText'
placeholder='Enter your Task' />
<button onClick={handleAddtask}
className='addTask'>{isEditing ? "save" : 'Add task'}</button>

{tasks && tasks.map((task, index) => {


return <li key={index} >
<input type="text1" className='input'
value={task}
/>

<button onClick={() => handleEdit(task)}


className='edit'>Edit</button>
<button onClick={() =>
handleDelete(task)} className='delete'>Delete</button>

</li>
})
}

</ul >

</div>
)
}

export default App;

You might also like