Bagaimana cara menghapus objek dari array secara dinamis setelah mengklik tombol "hapus".

Misalnya, dalam kode di bawah ini tabel memiliki n baris. Setelah mengklik tombol hapus tertentu, itu harus menghapus hanya baris itu. Sama seperti daftar tugas.

Tetapi dalam kasus saya seluruh tabel semakin dihapus.

const [items,itemList]=useState([]);
 const [companyName,setCompanyName]=useState('');
 const [experience, setExperience]=useState();


//Adding Items to Array after clicking "Add" button
const handleClose=()=>{
        itemList((old)=>{
            return [...old,{companyName,experience}]
          })
         
    }
//Removing Items from Array After clicking Remove button
const removeItem=(index)=>{
         
        itemList((old)=>{
          return old.filter((arrEle,i)=>{
            return (
               
                i!==index
                );
          })
        })
   }

//Displaying Array of objects on UI
<Table  striped bordered hover size="sm">
                                <thead>
                                    <tr>
                                        
                                        <th>Company Name</th>
                                        <th>Experience</th>
                                        <th>Actions</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    
                                        {
                                            items.map((item,index)=>{

                                                return(
                                                    <tr>
                                                    <td>{item.companyName}</td>
                                                    <td>{item.experience}</td>
                                                    <td><button onClick={()=>{removeItem(index)}}>Remove</button></td>
                                                    </tr>
                                                )
                                            })
                                        }
                                
                                    
                                   
                                </tbody>
                            </Table>
1
Abhishek Kanuganti 13 Mei 2021, 08:27

1 menjawab

Umumnya kita tidak boleh menghapus item apa pun dari array berdasarkan indeksnya. Jadi cobalah untuk menghapus item berdasarkan nilai unik: -

  const removeItem = item => {
    itemList(oldList => {
      return oldList.filter((arrEle, i) => arrEle.companyName !== item.companyName);
    });
  };

Dan berikan item di removeItem fungsi seperti di bawah ini:-

onClick={() => removeItem(item)}

Tambahkan key ke tr seperti di bawah ini:-

<tr key={`${item.companyName}-${index}`}>

Demo yang berfungsi: https://stackblitz.com/edit/react-cxkbge

0
Priyank Kachhela 13 Mei 2021, 07:00