OneCompiler

To Do list in React

158

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

)
}
</>
)
}