Axios delete function

[kalwarsushil2]

AS I wanted to delete the user from the database, so I used Axios.delete, but it was unable to delete the data from datatbase.

It shows the error of : “TypeError: axios__WEBPACK_IMPORTED_MODULE_5__.Axios.delete is not a function”

url to delete the item : https://sushil-ecommerce-admin.onrender.com/api/v1/users/63c046f0d51f67a684af974b

import React, { useState, useEffect } from 'react'
import './datatable.scss'
import { DataGrid } from '@mui/x-data-grid'
import { productColumns, userColumns, reviewsColumns } from '../../datasource'
import { Link } from 'react-router-dom'
import useDelete from '../../hooks/useDelete'
import { Axios } from 'axios'

const DataTable = ({ rowsData, setUpdated, type, url, showTitle, nav }) => {
  //const [deleteItem, error, loading, setId] = useDelete(url, type)
  const [cols, setCols] = useState([])
  const [loading, setLoading] = useState(false)

  const deleteItem = async (id) => {
    setLoading(true)
    console.log(url + id)
    await Axios.delete(url + id)
      .then((res) => {
        console.log(res)
      })
      .catch((error) => {
        console.log(error)
      })
    setLoading(false)
  }

  useEffect(() => {
    switch (type) {
      case 'users':
        setCols((prev) => userColumns)
        return
      case 'products':
        setCols(productColumns)
        return
      case 'reviews':
        setCols(reviewsColumns)
        return
      default:
        return () => {}
    }
  }, [type])

  const deleteData = (id) => {
    console.log(id)
    deleteItem(id)
    setUpdated(true)
  }

  const actionColumn = [
    {
      field: 'action',
      headerName: 'Action',
      width: 200,
      renderCell: (params) => {
        return (
          <div className='callAction'>
            <Link
              to={nav ? `/${type}/${params.row._id}` : `${params.row._id}`}
              style={{ textDecoration: 'none' }}
            >
              <div className='viewButton'>View</div>
            </Link>
            <div
              className='deleteButton'
              onClick={() => deleteData(params.row._id)}
            >
              Delete
            </div>
          </div>
        )
      },
    },
  ]

  return (
    <div className='datatable'>
      <div className='datatableTitle'>
        {showTitle ? `Add New ${type}` : `${type}`}

        {showTitle && (
          <Link
            className='link'
            to={nav ? `/${type}/create` : `/admin/${type}/create`}
            style={{ textDecoration: 'none' }}
          >
            Add New
          </Link>
        )}
      </div>

      <DataGrid
        aspect={3 / 1}
        className='datagrid'
        rows={rowsData}
        columns={cols.concat(actionColumn)}
        pageSize={9}
        rowsPerPageOptions={[9]}
        checkboxSelection
        getRowId={(rowsData) => rowsData._id}
      />
    </div>
  )
}

export default DataTable

[SpadeX]

axios.delete('url', { data: payload }).then(
  // Observe the data keyword this time. Very important
  // payload is the request body
  // Do something
)

• get requests optionally need a params key to properly set query parameters
• delete requests with a body need it to be set under a data key

[kalwarsushil2]

I am unable to understand what you are saying .
Can you please write proper code here.

[lasjorg]

You are not importing it correctly. Read the docs.

import axios from "axios";

[kalwarsushil2]

Thank You @lasjorg @camperextraordinaire @SpadeX