todolistwitheditreact

import React, { useState } from 'react'

import { TextField,Button } from '@mui/material';

import { MdDelete,MdDensityMedium } from "react-icons/md";

// import ShowList from './ShowList';

export default function Todo() {

    const [item,setItem]=useState([]);

    const [input,setInput]=useState('');

const [toggle,setToggle]=useState(false);

const [edititemid,setEdititemid]=useState(null);

    const Additem=()=>{

        // console.log(input);

        if(!input){

          alert("please fill the data");

        }

      else if(input && toggle===true){

     setToggle(false);

        console.log(edititemid);

        console.log(input);

        setItem(item.map((el,key)=>{

            if(key==edititemid){

                 return input

            //    console.log("yes matching",key,edititemid);

            }

            return el;

           }))

           setToggle(false);

           setInput('');

           setEdititemid(null);

      }

      else{

        setItem((prevItem)=>{

          return [ ...prevItem,input];

          });

      }

      console.log(item);

      setInput('');

    }

    const deleteItems=(index)=>{

      alert('delete item called');

      alert(index);

      setItem((prevItem)=>{

      return  prevItem.filter((arrel,key)=>{

        return   key!=index

       })

      })

    }

    const EditItems=(index,e)=>{

        console.log(index);

        console.log(e);

        //

        setToggle(true);

        setInput(e);

        let newEditItem= item.find((arrel,key)=>{

            return   key==index

           })

        console.log(newEditItem);

  setEdititemid(index);

    }

    const save=()=>{

      console.log('now item is',item);

    }

    //add change...

    // const EditItem=()=>{

       

    //     setToggle(false);

    //     console.log(edititemid);

    //     console.log(input);

    //     setItem(item.map((el,key)=>{

    //         if(key==edititemid){

    //              return input

    //         //    console.log("yes matching",key,edititemid);

    //         }

    //         return el;

    //        }))

    //        setToggle(false);

    //        setInput('');

    //        setEdititemid(null);

    // }

  return (

    <>

        <TextField id="outlined-basic" label="enter item" variant="outlined" value={input} onChange={(e)=>setInput(e.target.value)} />

        {toggle?<Button variant="contained" color="success" size="large"onClick={Additem}

            >EditItem</Button>:<Button variant="contained" color="success" size="large" onClick={Additem} >AddItem</Button>}

<ol>

        {item.map((e,index)=>

        (

        <li key={index}> {e}

 <button style={{fontSize:'1em'}}   onClick={()=>{

            EditItems(index,e)

           }}><MdDensityMedium></MdDensityMedium></button>

 <button style={{fontSize:'1em'}}

           onClick={()=>{

            deleteItems(index)

           }}> <MdDelete></MdDelete></button>

 </li>

         

         

        )  

           

       

            )}

            </ol>

<Button onClick={save} variant="contained" color="success" size="large">save</Button>

       

    </>

  )

}