following my app.js

import Form from "./Containers/Form";
import { useState, useCallback } from "react";
import List from "./Containers/List";

function App() {
let [items,setItems] = useState([]);
const handleAdd = useCallback((item)=>{
    let newItems=[...items,item];
        setItems(newItems)
},[items])
const onEdit=useCallback((odlv,newv)=>{
        let newItems=items.map((item)=>{
            if(item===odlv){
                return newv;
            }
            return item
        });
        setItems(newItems)

},[items]);

const onDelete=(odlv)=>{
    console.log("old",odlv)
    let newItems=items.filter((item)=>{
        return (item!==odlv)
    });
    setItems(newItems)
}
return ( <div className = "container" >
                <Form onAdd={handleAdd}/>
                <List items={[...items]} onEdit={onEdit} onDelete={onDelete} />
        </div >
);
}

  export default App;

and my list item.js `

import InputBox from "./InputBox"

import { useMemo, useState, useCallback } from "react"

export default function Item(props){
        let [edit,setEdit]=useState(false)
        let [taskDetail,setTaskDetail]=useState(props.item)
        let [error,setError]=useState('')
        let handleSave=useCallback(()=>{
            if(taskDetail==''){
                setError('Please Enter Task Details')
            }else{
                if(taskDetail!==props.item)
                {
                    setError('')
                    props.onEdit(props.item,taskDetail)
                    setEdit(false)
                }
            }

        },[edit,taskDetail,error])


        const handleTaskUpdate=useCallback((e)=>{
            setTaskDetail(e.target.value)
        },[])

        let [titleDisplay,editButton,deleteButton]=useMemo(()=>{
            if(edit){
                return [<InputBox value={taskDetail} error={error} onChange={handleTaskUpdate}
                />,<button onClick={handleSave} className='btn btn-success '>Save</button>,<button onClick={()=>{setEdit(false)}} className='ms-1 btn btn-danger'>Cancel</button>]
            }
            return [<h5>{props.item}</h5>,<button onClick={()=>setEdit(true)} className='btn btn-secondary '>Edit</button>,<button className='ms-1 btn btn-danger' onClick={()=>{props.onDelete(taskDetail)}}>Delete</button>];
        },[edit,taskDetail,error])

        return<li className='list-group-item'>
                <div className='row'>
                        <div className='col-md-6'>{titleDisplay}</div>
                        <div className='col-md-6'>
                            {editButton}{deleteButton}
                        </div>
            </div>
            
        </li>
  }

` when i click on delete ,it works fine for last node deletion but when middle node is deleted it removed all other node expect the first one like try adding A ,B ,C, D remove D will work fine but remove B will remove C and D any suugestion on whats going wrong? thanks in advacne

CodePudding user response：

the problem occurs because useMemo is missing dependencies. In this case props.item, props.onDelete, setEdit If you don't pass these required arguments as dependencies useMemo will no recalculate what is inside the callback and will continue using the old momoized values, thus props.items was the same variable containing the same values even if you removed some of them. When you delete one item and this variable is part of the dependencies, react knows that it's changed and useMemo is recalculated.