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.
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;