Full-Stack React Projects - Second Edition

The CategoryPie component

We will implement a React component that calls the average expenses by category API to render the received array of average expenses incurred per category in a Victory Pie 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 pie chart in a React component called CategoryPie. When this component loads, we render a pie chart for the average expenses incurred per category in the given month. We also add two DatePicker components to allow users to select the desired date range and retrieve data for that range with a button click. In the following code, we retrieve the initial average expense data with a useEffect hook when the ...