manpreet-01 / budget-manager-app-react Goto Github PK

Let's go through the functionality of each component in detail.

BudgetForm Component:

• The BudgetForm component is responsible for adding budgets to the app. It has two input fields, one for the budget name and another for the budget amount.
• When the form is submitted, a handleSubmit function should be called, which prevents the default form submission behavior, extracts the name and amount from the input fields using useState hooks, and then add the name and amount of the budget to budgets array.
• After submitting the form, the input fields should reset to empty values.

ExpenseForm Component:

• The ExpenseForm component is responsible for adding expenses to the app. It has three input fields, one for the expense name, another for the expense amount, and a select field for selecting the budget category.
• The categories are populated in the select field using the budgets array received as props from the parent App component.
• When the form is submitted, an onSubmit function should be called, which prevents the default form submission behavior, extracts the name, amount, and categoryId (selected budget category) from the input fields using useState hooks, and then add the name, amount, and categoryID to expenses array.
• After submitting the form, the input fields should reset to empty values.

App Component:

• The App component is the main component that renders the BudgetForm and ExpenseForm components.
• It also maintains the state for budgets and expenses using useState hooks.
• The budgets state is an array that holds the list of budgets added by the user, and the expenses state is an array that holds the list of expenses added by the user.
• The getCategoryName function is a utility function defined in the parent App component. It takes a categoryId as an argument and finds the corresponding budget category from the budgets array.

Note: 
Do not remove the given boilerplate.
Do not remove the classes and Ids from the boilerplate.
Use Date.now() as categoryId.