AddForm.jsx :

• State:
  • formData: Holds the data for the expense form.
  • error: Keeps track of form validation errors.
• Functions:
  • validateError: Validates the form data and sets error messages if necessary.
  • submitHandler: Handles form submission, updates existing expenses, or adds new ones.
  • handleInputChange: Updates form data on input change.
• Effect:
  • useEffect: Saves the expenses in local storage whenever there’s a change in the expense state.

• Structure:

  • The component renders a form with input fields for title, category, and amount.
  • InputControl is a custom component rendering an input field with label and error handling.

  JavaScript Logic:

  • Validates the form data to ensure required fields are filled.
  • Modifies existing expenses or adds new ones based on user input.
  • Updates local storage with the latest expenses.

  Purpose of Functions:

  • validateError: Checks for missing fields and updates the error state accordingly.
  • submitHandler: Handles form submission, either updating existing expenses or adding new ones.
  • handleInputChange: Updates the formData state on input change.

ContextMenu.jsx

• Functions:
  • deleteHandler: Deletes the selected expense.
  • editHandler: Populates the form with the selected expense data for editing.

Structure:

• Renders a context menu with “Edit” and “Delete” options.

JavaScript Logic:

• Handles the delete and edit functionalities for an expense.

Purpose of Functions:

• deleteHandler: Deletes the selected expense.
• editHandler: Populates the form with the selected expense data for editing.

ExpenseTable.jsx