Full-Stack React Projects - Second Edition

Rendering expenses

In the Expenses component view, we iterate through the list of expenses retrieved from the database and display each expense record to the end user in a Material-UI ExpansionPanel component. In the ExpansionPanel component, we show details of the individual expense record in the Summary section. Then, on the expansion of the panel, we will give the user the option to edit details of the expense or delete the expense, as discussed in the next section.

In the following code added to the view code after the search form elements, we use map to iterate through the expenses array and render each expense in an ExpansionPanel component.

mern-expense-tracker/client/expense/Expenses.js:

{expenses.map((expense, index) = { return span ...