Full-Stack React Projects - Second Edition

The YearlyBar component

We will implement a React component that calls the yearly expenses data API to render the received array of expenses incurred monthly over a given year in a Victory Bar chart.

The API can be fetched either in a useEffect hook or when a button is clicked on. In the MERN Expense Tracker application, we render this bar chart in a React component called YearlyBar. When this component loads, we render a bar chart for expenses in the current year. We also add a DatePicker component to allow users to select the desired year and retrieve data for that year with a button click. In the following code, we retrieve the initial yearly expense data with a useEffect hook when the component loads.

mern-expense-tracker/client/report/YearlyBar.js ...