react todolist

 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 Additem=()=>{

        // console.log(input);

      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

       })

      })

    }

  return (

    <>

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

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

<ol>

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

        (

        <li key={index}> {e}

 <button style={{fontSize:'1em'}} ><MdDensityMedium></MdDensityMedium></button>

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

           onClick={()=>{

            deleteItems(index)

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

 </li>

         

          

        )  

           

        

            )}

            </ol>

       

    </>

  )

}