provincial-silver•2y ago

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");
          },
      },
    );
  };

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>
          ))}

{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 ?

3 Replies

refine-support-bot•2y ago

Hi, I am refine support bot :wave:. I am here to help you with your question. I searched for the answer to your question in the refine documentation and found an answer! 🏆
Answer: You can use the useDelete hook provided by Refine to delete a record. You need to pass the resource and id parameters to the mutate function. You can also use the <DeleteButton/> component to delete a record. You need to pass the recordItemId parameter to the <DeleteButton/> component. You can enable the delete feature on the show page and edit page by setting the canDelete property to true. SOURCES: ./docs/api-reference/core/hooks/data/useDelete/#properties ./docs/tutorial/4-adding-crud-pages/headless/add-delete-feature.md ./docs/tutorial/4-adding-crud-pages/chakra-ui/add-delete-feature.md ./docs/tutorial/4-adding-crud-pages/mui/add-delete-feature.md ./docs/tutorial/4-adding-crud-pages/mantine/add-delete-feature.md

Note: If this is the answer you need, then we are very lucky. If not, please wait for someone from the refine core team or the community to try to help you.

deep-jade•2y ago

Hey @Deleted User, You should be define your handleDeleteProduct function like below. const handleDeleteProduct = (id) => /* */

provincial-silver•2y ago

@salihozdemir Thanks man, its work now code after editing if someone may need to understand :

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

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

<Dialog title={`do you want delete ${p.name} ?`} dialogState={setOpenDialog} yesFunction={handleDeleteProduct} itemId={p._id}/>

<Dialog title={`do you want delete ${p.name} ?`} dialogState={setOpenDialog} yesFunction={handleDeleteProduct} itemId={p._id}/>

export default function AlertDialogSlide({ title, dialogState, yesFunction, itemId }) {
  return (
    <Dialog
        open={dialogState}
        TransitionComponent={Transition}
        keepMounted
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogTitle>{ title }</DialogTitle>
        <DialogActions>
          <Button onClick={() => dialogState(false)}>No</Button>
          <Button onClick={() => {
            dialogState(false)
            yesFunction(itemId);
          }}>Yes</Button>
        </DialogActions>
      </Dialog>
  );
}

export default function AlertDialogSlide({ title, dialogState, yesFunction, itemId }) {
  return (
    <Dialog
        open={dialogState}
        TransitionComponent={Transition}
        keepMounted
        aria-describedby="alert-dialog-slide-description"
      >
        <DialogTitle>{ title }</DialogTitle>
        <DialogActions>
          <Button onClick={() => dialogState(false)}>No</Button>
          <Button onClick={() => {
            dialogState(false)
            yesFunction(itemId);
          }}>Yes</Button>
        </DialogActions>
      </Dialog>
  );
}