To Do list in React
import {useState} from 'react';
export default function App() {
const[text,setText] = useState('')
const[list,setList] = useState([])
const[editindex,setEditindex] = useState(-1)
const[textx,setTextx] = useState('')
function handleAdd()
{
setList([...list,text])
setText('')
}
function handleDelete(index)
{
let newlist = [...list]
setList( newlist.filter((t,i)=> i!==index) )
}
function handleEdit(index)
{
setEditindex(index)
}
function handleSave(){
let newlist = [...list]
newlist[editindex] = textx
setList(newlist)
setEditindex(-1)
setTextx('')
}
return (
<>
<input type='text' value={text} onChange={(e)=>{setText(e.target.value)}}/>
<button onClick={handleAdd}>Add</button>
{
list.map((t,i)=> (
(i === editindex)?(
<div key ={i}>
<input type='text' value={textx} onChange={(e)=>{setTextx(e.target.value)}} />
<button onClick={()=>handleSave(t,i)}>Save</button>
</div>
):(
<div key = {i}>
{t}
<button onClick={()=>handleEdit(i)}> Edit </button>
<button onClick={()=>handleDelete(i)}> Delete </button>
</div>
))
)
}
</>
)
}