When planning this app, I wrote that once a budget for the month has been set, the user should be shown a screen that contains a button to add their expenses for the month.
The button's behavior was also detailed, and we said that upon tapping on that button, the user should be shown a modal that allows them to input details for their expenses--the name, amount, date the purchase was made on, and an icon to categorize the item. The modal should allow the user to either cancel or save the entry they make.
We can create one component to add expenses that will contain both the Button
and Modal
, with the Modal
defaulting to a hidden state unless activated by the Button
.
Let's start by creating a component, titled AddExpenses
, which will start off by doing the following things:
- Accepting the
month
andyear
as props - Rendering a
Button
that, when pressed, will alert the user for now
Additionally, we should render the AddExpenses
component within App.js
:
// Expenses...