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