Why is my async remove method with DELETE restapi call in reactjs not working?

  api, javascript, postman, reactjs, rest

Why is my onclick() remove method not working in this react component? I checked the DELETE api call using postman and it works fine. The interface is also displayed correctly with all the information. Its just that when I click the delete button nothing happens, but it should have triggered the async remove method to invoke the DELETE api call.

enter image description here

import React, { Component } from 'react';
import AppNav from './AppNav';
import DatePicker from 'react-datepicker';

import "react-datepicker/dist/react-datepicker.css";
import { Table, FormGroup, Button, Input, Container, Label, Form } from 'reactstrap';
import { Link } from 'react-router-dom';
import Category from './Category';


class Expenses extends Component {

    emptyItem = {
        id: '103',
        expensedate : new Date(),
        description : '',
        location : '',
        categories : [1, 'Travel']
    }

    constructor(props) {
        super(props)

        this.state = {
            isLoading: false,
            Categories : [],
            Expenses : [],
            date : new Date(),
            item : this.emptyItem
        }
    }

    async remove(id){
        await fetch(`/api/expenses/${id}` , {
            method: 'DELETE',
            headers: {
                'Accept' : 'application/json',
                'Content-Type' : 'application/json'
            }
        }).then(() => {
            let updatedExpenses = [...this.state.Expenses].filter(i => i.id !== id);
            this.setState({Expenses : updatedExpenses});
        });
    }


    async componentDidMount() {
        const response = await fetch('/api/categories');
        const body = await response.json();
        this.setState({Categories : body , isLoading : false});

        const responseExp = await fetch('/api/expenses');
        const bodyExp = await responseExp.json();
        this.setState({Expenses : bodyExp , isLoading : false});        
    }


    render() {
        const title= <h3>Add Expense</h3>;
        const {Categories} = this.state;
        const {Expenses, isLoading} = this.state;

        if(isLoading)
            return(<div>Loading....</div>)

            let optionList = 
                Categories.map( category =>
                    <option id={category.id}>
                        {category.name}
                        </option>
                )
            
            let rows=
                Expenses.map( expense =>
                    <tr>
                        <td>{expense.description}</td>
                        <td>{expense.location}</td>
                        <td>{expense.expensedate}</td>
                        <td>{expense.category.name}</td>
                        <td><Button size="sm" color="danger" onCLick={ () => this.remove(expense.id)}>Delete</Button></td>
                    </tr>
                    )

        return ( 
            <div>
                <AppNav/>
                <Container>
                    {title}
                    <Form onSubmit={this.handleSubmit}>
                        <FormGroup>
                            <Label for="title">Title</Label>
                            <input type="text" name="title" id="title" onChange={this.handleChange} autoComplete="name"/>
                        </FormGroup>

                        <FormGroup>
                            <Label for="title">Category</Label>
                            <select>
                                {optionList}
                            </select>

                            
                            <input type="text" name="category" id="category" onChange={this.handleChange}/>
                        </FormGroup>

                        <FormGroup>
                            <Label for="city">Date</Label>
                            <DatePicker selected={this.state.date} onChange={this.handleDateChange}/>
                        </FormGroup>
                        
                        <div className="row">
                        <FormGroup className="col-md-4 mb-3">
                            <Label for="location">Location</Label>
                            <input type="text" name="location" id="location"/>
                        </FormGroup>
                        </div>

                        <FormGroup>
                            <Button color="primary" type="subimt">Save</Button>{' '}
                            <Button color="secondary" tag={Link} to="/">Cancel</Button>
                        </FormGroup>
                    </Form>
                </Container>

            {''}
                <Container>
                    <h3>Expense List</h3>
                    <Table className="mt-4">
                        <thead>
                            <tr>
                                <th width="30%">Description</th>
                                <th width="10%">Location</th>
                                <th>Date</th>                                
                                <th>Category</th>
                                <th width="10%">Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            {rows}
                        </tbody>

                    </Table>
                </Container>

            </div>
         );
    }
}

 
export default Expenses;

Source: Ask Javascript Questions

LEAVE A COMMENT