ComponentDidMount() and state not updating with redux - redux

Question

have this code snippet for a budget input and display. global state is updated in context and then repopulated in my display here "currentList" through component did mount.
the API updates but the page and state does not rerender. should i be using useEffect on the handle submit? when i try it tells me my dispatch is lost
state = {
expenses: []
}
componentDidMount() {
API.getExpense().then((expenses) => {
console.log(expenses.data);
this.setState({ expenses: expenses.data });
});
}
handleSubmit = (dispatch) => {
dispatch({
type: 'remove',
expenses: this.state.expenses,
})
this.setState({
expenses: [
...this.state.expenses
]
});
console.log(this.state.expenses)
};
deleteExpense = (id) => {
API.deleteExpense(id)
};
currentList = () => {
const currentList =
this.state.expenses.length > 0 ? (
this.state.expenses.map((expense, index) => {
const { dispatch } = this.state;
return (
<tr key={index}>
<td>{expense.expenseTitle}</td>
<td>{expense.amount}</td>
<td>{expense.category}</td>
<td>
<span className="delete-btn" role="button" id={expense._id} tabIndex="0" onClick={(e) => { this.deleteExpense(e.currentTarget.id) }} onClick={this.handleSubmit.bind(this, dispatch)}>
✗
</span>
</td>
</tr>
);
})
) : (
<tr></tr>
);
return currentList;
}
render() {
return (
<div className='card mt-5' >
<table className='table-bordered'>
<thead>
<tr>
<th>title</th>
<th>amount</th>
<th>category</th>
<th>remove</th>
</tr>
</thead>
<BudgetConsumer>
{(value) => {
// console.log(value.expenses);
const expensesList =
value.expenses.length > 0 ? (
value.expenses.map((expense, index) => {
const { dispatch } = this.state;
return (
<tr key={index}>
<td>{expense.expenseTitle}</td>
<td>{expense.amount}</td>
<td>{expense.category}</td>
<td>
<span className="delete-btn" role="button" id={expense._id} tabIndex="0" onClick={(e) => { this.deleteExpense(e.currentTarget.id) }} onClick={this.handleSubmit.bind(this, dispatch)}>
✗
</span>
</td>
</tr>
);
})
) : (
<tr></tr>
);
return <tbody>{this.currentList()}{expensesList}</tbody>;
}}
</BudgetConsumer>
<tbody></tbody>
</table>
</div >
);
}
}

Answer 1

try this in the componentDidMount
this.setState({expenses: [...expenses.data]});

Answer 2

fixed, was thinkng too hard into the
componentDidMount() {
console.log(this.state.expenses)
API.getExpense().then((expenses) => {
console.log(expenses.data);
this.setState({ expenses: expenses.data });
});
}
// call delete for the API then rerun the get expense API to reset the state
deleteExpense = (id) => {
API.deleteExpense(id).then(
API.getExpense().then((expenses) => {
console.log(expenses.data);
this.setState({ expenses: expenses.data });
})
)
};