Full-Stack React Projects - Second Edition

The MonthlyScatter component

We will implement a React component that calls the scatter plot data API to render the received array of expenses incurred over a given month in a Victory Scatter 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 scatter chart in a React component called MonthlyScatter. When this component loads, we render a scatter chart for expenses in the current month. We also add a DatePicker component to allow users to select the desired month and retrieve data for that month with a button click. In the following code, we retrieve the initial scatter plot data with a useEffect hook when the component loads.

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