In my project, a user may have many budgets, and each budget may have many expenses. I am using a Ruby on Rails backend and performing a fetch to localhost with my React.js frontend. I want to be able to create,update and delete for both the budgets and the expenses. So the POST request works and returns something like this :

```
[
{
"id": 1,
"category": "transport",
"amount": 200,
"user_id": 1,
"expenses": [
{
"id": 127,
"budget_id": 1,
"description": "transport expense",
"date": null,
"amount": 20,
"created_at": "2020-07-09T06:15:50.287Z",
"updated_at": "2020-07-09T06:15:50.287Z"
}
]
},
{
"id": 4,
"category": "a new budget",
"amount": 200,
"user_id": 1,
"expenses": []
},
{
"id": 5,
"category": "new budget",
"amount": 2000,
"user_id": 1,
"expenses": [
{
"id": 125,
"budget_id": 5,
"description": "new expense",
"date": null,
"amount": 30,
"created_at": "2020-07-09T06:15:34.533Z",
"updated_at": "2020-07-09T06:15:34.533Z"
},
{
"id": 126,
"budget_id": 5,
"description": "another new exp",
"date": null,
"amount": 30,
"created_at": "2020-07-09T06:15:43.071Z",
"updated_at": "2020-07-09T06:15:43.071Z"
}
]
}
]

```

My component tree looks something like this :

[![enter image description here](https://i.stack.imgur.com/goysh.jpg)](https://i.stack.imgur.com/goysh.jpg)

While I am able to delete things from the backend, items (budget/expense) don't appear to delete until I refresh the page.
I have the following function living in Budget.js in order to deduct the totals of expenses from the budgets (which should update whenever an expense is added/deleted/updated which only happens once I refresh):

```

  handleBudgetChange = () => {
    let total = 0

    total = this.state.expense.reduce(
      (prevValue, currentValue) => prevValue + currentValue.amount, 0);
    let budgetRemaining = this.props.budget.amount - total 

    this.setState({
      remainingBudget: budgetRemaining
    })
  }

```

I have the state of Budget living in App.js and the state of Expenses living in Budget.js (also, the state of expense is set equal to the props of the budget---- this is because I needed to have the ability to match the created expenses with the appropriate budget and for some reason this wouldn't work any other way).

If anyone has ANY TIPS whatsoever on how to fix this issue.. I've been stuck on it for days. I also am not very familiar with react (and have 0 familiarity with hooks and redux) so any help would be much appreciated. I would be happy to provide any additional info/code if needed. Thanks!