REACT JS: Crud table delete - reactjs

Question

I have a parent component that sends props to a CRUD Table, i have a problem with deleting the items i want to delete the item with the selected id and i want to send both the email and id in the body of the request. i create the Info just to send it to the CRUD table to be shown because i don't want the entire pendingList to be shown. The id sent to the request when i click on deleteIcon={<IoTrashOutline style={{fontSize: '18px', color: 'red', cursor: 'pointer'}} onClick={() => handleDeleteProduct(info.id)} />} is undefined and i get it cause info is an array the problem is i'm not sure how to get the specific id of the item i want to delete and send it to the request. Any suggestions?
const UserNewDevice = () => {
const [pendingList, setPendingList] = useState([]);
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState('');
const email = localStorage.getItem("email")
useEffect(() => {
const fetchPendingList = async () => {
setIsLoading(true);
try {
const res = await fetch('http://localhost:5000/prods/user_product', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem("token")}`
},
body: JSON.stringify(email),
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.msg);
}
const data = await res.json();
setPendingList(data);
} catch (err) {
setError(err.message);
} finally {
setIsLoading(false);
}
};
fetchPendingList();
}, []);
const info = pendingList.map(item => {
return {
id: item._id,
produit: item.produits,
marque: item.marque,
référence: item.référence,
installation: item.annéeInstallation,
entretenu: item.entretenu,
année: item.selectedYearEntretenu,
}
});
const handleDeleteProduct = async (id) => {
try {
const email = localStorage.getItem("email");
console.log('id', id)
const res = await fetch('http://localhost:5000/prods/remove_product', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${localStorage.getItem('token')}`
},
body: JSON.stringify({ id, email })
});
if (!res.ok) {
const data = await res.json();
throw new Error(data.msg);
}
const data = await res.json();
setPendingList(pendingList.filter(item => item.id !== id));
} catch (err) {
console.error(err);
setError(err.message);
}
};
return (
<>
<div className="mt-10 sm:mt-0 w-[92%] ml-12">
<div className="md:grid md:grid-cols-2 md:gap-6">
<div className="mt-5 md:col-span-2 md:mt-0">
<CRUDTable
data={info}
link={`/user-projets-details/`}
pencilIcon={<IoPencil style={{fontSize: '18px', cursor: 'pointer', color: 'green'}}/>}
eyeIcon={<IoEyeOutline style={{fontSize: '18px', cursor: 'pointer', color: '#f8c408'}}/>}
deleteIcon={<IoTrashOutline style={{fontSize: '18px', color: 'red', cursor: 'pointer'}} onClick={() => handleDeleteProduct(info.id)} />}
/>
</div>
</div>
</div>
</>
)
}
export default UserNewDevice

Answer 1

The issue is that info is an array, not an object, and info.id is not a valid reference. To get the specific id of the item you want to delete, you need to pass it as a parameter when calling the handleDeleteProduct function from within the deleteIcon prop. You can modify the code as follows:
deleteIcon={(id) => <IoTrashOutline style={{fontSize: '18px', color: 'red', cursor: 'pointer'}} onClick={() => handleDeleteProduct(id)} />}
And when you call it in the map function:
const info = pendingList.map(item => {
return {
id: item._id,
produit: item.produits,
marque: item.marque,
référence: item.référence,
installation: item.annéeInstallation,
entretenu: item.entretenu,
année: item.selectedYearEntretenu,
}
});
Becomes:
const info = pendingList.map(item => {
return {
id: item._id,
produit: item.produits,
marque: item.marque,
référence: item.référence,
installation: item.annéeInstallation,
entretenu: item.entretenu,
année: item.selectedYearEntretenu,
deleteIcon: item._id,
}
});