wet-aquaW
Refine•3y ago•
3 replies
wet-aqua

delete item by id using useDelete()

hi all
Iam trying to delete a specific item from the DB by ID
the steps like that:
1) we have a data table which includes items and the last column in the data Table have two buttons (delete and edit)
2) when I click on delete I open an external component (which is a dialog) and ask if the user sure to delete the item
3) if click no I close the dialog if click yes I want to delete the item

the issue I face that I send to the Dialog component the delete function with the product id, but when I define the delete function I get error that the ID is not define
code:
const { mutate } = useDelete();

  const handleDeleteProduct = ({ id }) => {
    mutate(
      {
          resource: "Products",
          id: id as string,
      },
      {
          onSuccess: () => {
              navigate("/Products");
          },
      },
    );
  };


{allProducts.map((p) => (
            <StyledTableRow key={p._id}>
              <StyledTableCell align='center'>{p.name}</StyledTableCell>
              <StyledTableCell align='center'>{p.id}</StyledTableCell>
              <StyledTableCell align='center'>{p.quantity}</StyledTableCell>
              <StyledTableCell align='center'>{p.price}</StyledTableCell>
              <StyledTableCell align='center'>
                <Button
                        sx={{borderRadius: '30px', backgroundColor: '#2549FE', boxShadow: 2, color: 'white'}}><Edit/></Button>
                <Button onClick={() => setOpenDialog(true)}
                        sx={{borderRadius: '30px', backgroundColor: '#FF0000', boxShadow: 2, color: 'white'}}><Delete/></Button>
              {openDialog && <Dialog title={`do you want delete ${p.name} ?`} productId={p._id} dialogState={setOpenDialog} yesFunction={handleDeleteProduct(p._id)}/>}
              </StyledTableCell>
            </StyledTableRow>
          ))}

the error is: Binding element 'id' implicitly has an 'any' type.ts(7031)
how I can solve this error ?
Was this page helpful?