Improving our components

Lets start by renaming our Budget folder to List. And we’re also renaming all three components inside of it, BudgetList to List, BudgetListHeader to ListHeader and BudgetListBody to ListBody

Renamed components

Now open your List component:

We changed our class name to match our component, and we also changed the slots names.

Open your ListHeader component:

We changed our classes names aswell and changed our template to render from a prop, this way we can reuse this component on other pages.

Now on our ListBody component:

We also made our ListBody component to render from a prop.

Now open your Home page component:

We changed our imports and tags to match our renamed components, added a snackbar so we can display an error in case we fail to fetch data, we also added a new array to our component’s data: budgetHeaders, and the data necessary for our snackbar.

We’ll use budgetHeaders to display the right headers to our list.

We also made a few changes to our getAllBudgets method:

Now instead of passing our data directly to our budgets data, we’re using our new method:

This method accepts an array as first argument, and an unknown number of arguments that’ll create an array named options using the Spread Operator .

Our method will get every item in our targeted array, which in this case, is our budgets, and then create a new object named parsed .

This object will hold every option of our options array, and then be pushed to parsedData array, which is returned.

And finally we catch our error (in case there’s one), activating our snackbar.

Now we need to edit our router, so go to your router folder and open index.js :