I want to be able to delete items of a list fetched from MongoDB.

Items of an array of the list are retrieved from MongoDB and displayed in React app (I use Typescript).

Unfortunately, I get error HERE I get error Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'

ExpensesListItem.tsx

import React from "react";
import { IconButton, ListItem, ListItemSecondaryAction, ListItemText } from "@material-ui/core";
import DeleteIcon from '@material-ui/icons/Delete';
import { ExpenseAndAmountObject } from '../ExpenseAndAmountObject';
import axios from 'axios';
interface Props {
    expenseTitle: string;
    expenseAmount: string;
    currencySymbol: string;
    item: ExpenseAndAmountObject;
    expenseAndAmountList: Array<ExpenseAndAmountObject>;
    setExpenseAndAmountList: (value: Array<ExpenseAndAmountObject>) => void;
  }

const ExpensesListItem: React.FC<Props> = (
    {
        expenseTitle,
        expenseAmount,
        currencySymbol,
        item,
        expenseAndAmountList,
        setExpenseAndAmountList
    }: Props) => {

        const DeleteListItem = (toBeDeletedItemId: any) => {
        setExpenseAndAmountList(expenseAndAmountList.filter(el => el._id !== toBeDeletedItemId));

        axios.delete('http://localhost:4000/app/expenseslist',{itemId:toBeDeletedItemId}) 
//HERE I GET THE ERROR Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'
        .catch(function (error) {
            console.log(error);
        });
    }
    return (
        <>
            <ListItem className="list-item">
                <ListItemText primary={expenseTitle} secondary={expenseAmount + currencySymbol} />
                <ListItemSecondaryAction>
                    <IconButton onClick={()=>DeleteListItem(item._id)} edge="end">
                        <DeleteIcon className="delete-btn" />
                    </IconButton>
                </ListItemSecondaryAction>
            </ListItem>
        </>
      );
  }
  
export default ExpensesListItem;

routes.js

 router.delete('/expenseslist', (request, response) => {
    let itemId = request.body._id;
    ExpenseAndAmountTemplate.findByIdAndRemove(itemId, function(err){
        if(err){
            response.send("/Could not delete the item...");
        } else {
            response.send("/Expenses and amount item was deleted succesfully...");
        }
     });
 });

ExpenseAndAmountModel.js (This is the model used at router.delete)

const mongoose = require('mongoose');

const ExpenseAndAmountTemplate = new mongoose.Schema({
    _id: {
        type:String,
        required:false
    },
    expenseTitle: {
        type:String,
        required:true
    },
    expenseAmount: {
        type:String,
        required:true
    }
});

module.exports = mongoose.model('ExpenseAndAmountData', ExpenseAndAmountTemplate);

Do you know how to solve it? Thanks!

I want to be able to delete items of a list fetched from MongoDB.

Items of an array of the list are retrieved from MongoDB and displayed in React app (I use Typescript).

Unfortunately, I get error HERE I get error Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'

ExpensesListItem.tsx

import React from "react";
import { IconButton, ListItem, ListItemSecondaryAction, ListItemText } from "@material-ui/core";
import DeleteIcon from '@material-ui/icons/Delete';
import { ExpenseAndAmountObject } from '../ExpenseAndAmountObject';
import axios from 'axios';
interface Props {
    expenseTitle: string;
    expenseAmount: string;
    currencySymbol: string;
    item: ExpenseAndAmountObject;
    expenseAndAmountList: Array<ExpenseAndAmountObject>;
    setExpenseAndAmountList: (value: Array<ExpenseAndAmountObject>) => void;
  }

const ExpensesListItem: React.FC<Props> = (
    {
        expenseTitle,
        expenseAmount,
        currencySymbol,
        item,
        expenseAndAmountList,
        setExpenseAndAmountList
    }: Props) => {

        const DeleteListItem = (toBeDeletedItemId: any) => {
        setExpenseAndAmountList(expenseAndAmountList.filter(el => el._id !== toBeDeletedItemId));

        axios.delete('http://localhost:4000/app/expenseslist',{itemId:toBeDeletedItemId}) 
//HERE I GET THE ERROR Argument of type '{ itemId: any; }' is not assignable to parameter of type 'AxiosRequestConfig'
        .catch(function (error) {
            console.log(error);
        });
    }
    return (
        <>
            <ListItem className="list-item">
                <ListItemText primary={expenseTitle} secondary={expenseAmount + currencySymbol} />
                <ListItemSecondaryAction>
                    <IconButton onClick={()=>DeleteListItem(item._id)} edge="end">
                        <DeleteIcon className="delete-btn" />
                    </IconButton>
                </ListItemSecondaryAction>
            </ListItem>
        </>
      );
  }
  
export default ExpensesListItem;

routes.js

 router.delete('/expenseslist', (request, response) => {
    let itemId = request.body._id;
    ExpenseAndAmountTemplate.findByIdAndRemove(itemId, function(err){
        if(err){
            response.send("/Could not delete the item...");
        } else {
            response.send("/Expenses and amount item was deleted succesfully...");
        }
     });
 });

ExpenseAndAmountModel.js (This is the model used at router.delete)

const mongoose = require('mongoose');

const ExpenseAndAmountTemplate = new mongoose.Schema({
    _id: {
        type:String,
        required:false
    },
    expenseTitle: {
        type:String,
        required:true
    },
    expenseAmount: {
        type:String,
        required:true
    }
});

module.exports = mongoose.model('ExpenseAndAmountData', ExpenseAndAmountTemplate);

Do you know how to solve it? Thanks!

• javascript
• reactjs
• typescript
• mongodb
• axios

2 Answers 2

Instead of { itemId: toBeDeletedItemId } try { data: { itemId: toBeDeletedItemId } }

This way you are passing data to the request body.

i would initialize an AxiosRequestConfig[1] obj, and set the data in it to what you want to pass in the request.body–then pass the config to the delete method like so:

import axios, { AxiosRequestConfig } from "axios";

const tsError = (itemId: number) => {
  axios.delete("http://localhost:4000/app/expenseslist", { itemId: itemId });
};

const tsSuccess = (itemId: number) => {
  const requestConfig: AxiosRequestConfig = {};
  requestConfig.data = { itemId: itemId };

  axios.delete("http://localhost:4000/app/expenseslist", requestConfig);
};

[1]AxiosRequestConfig: https://axios-http.com/docs/req_config