Master React JS with Expense Form

Table of Contents

1. Introduction
2. Adding a Drop-down for Sorting
   1. Creating the Select Element
   2. Adding Options to the Select Element
   3. Setting the Default Value Based on Store's Sort By
   4. Handling OnChange Event for Select Element
   5. Dispatching Sort By Actions
3. Creating an Expense Form
   1. Setting up the Expense Form Component
   2. Adding Input Fields for Description, Amount, and Note
   3. Handling OnChange Event for Input Fields
   4. Handling OnSubmit Event for Form
   5. Dispatching Add Expense Action
4. Redirecting to Home Page after Adding Expense
   1. Accessing the History Prop
   2. Using the Push Method to Redirect to Home Page
5. Conclusion

Adding a Drop-down for Sorting

To improve the user experience of our application, we want to add a drop-down menu for sorting the expenses by date or amount. This feature will allow users to easily organize their expenses based on their preferences.

Creating the Select Element

First, we need to add a <select> tag to our component to Create the drop-down menu. We will also add the necessary <option> tags inside the <select> tag.

Adding Options to the Select Element

Inside the <select> tag, we will add two <option> tags to represent the sorting options: "Date" and "Amount". These options will allow users to select their preferred sorting method.

Setting the Default Value based on Store's Sort By

To ensure that the drop-down menu reflects the Current sorting method, we need to set the default value of the <select> tag based on the value stored in our Redux store. We can access the "sort by" value from the store using props.filters.sortBy.

Handling OnChange Event for Select Element

Next, we need to handle the onChange event of the <select> tag. This event will be triggered whenever the user selects a new sorting option from the drop-down menu. We will create a function to handle this event and update the state accordingly.

Dispatching Sort By Actions

Finally, once the user selects a new sorting option, we need to dispatch the corresponding action to update the store's sorting method. We will create separate actions for sorting by date and sorting by amount and dispatch them based on the user's selection.

Creating an Expense Form

In addition to the sorting feature, we also want to allow users to add or edit expenses using a form. This form will have input fields for the expense description, amount, and an optional note.

Setting up the Expense Form Component

To begin, we will create a new component called ExpenseForm.js. This component will be responsible for rendering the expense form and handling user interactions.

Adding Input Fields for Description, Amount, and Note

Inside the ExpenseForm component, we will add three input fields: one for the expense description, one for the amount, and a textarea for the note. These input fields will allow users to enter the necessary information for their expenses.

Handling OnChange Event for Input Fields

To capture the user's input in the input fields, we will handle the onChange event for each field. We will create separate methods to handle the changes in the description, amount, and note fields, respectively. These methods will update the component's state to reflect the user's input.

Handling OnSubmit Event for Form

Once the user fills out the form and clicks the "Add Expense" button, we need to handle the form's onSubmit event. This event will be triggered when the user submits the form. We will create a method to handle this event and extract the form data from the component's state.

Dispatching Add Expense Action

After extracting the form data, we will dispatch the "add expense" action to update the store with the new expense. We will create an action called addExpense that takes the expense data as a parameter and dispatches it to the Redux store.

Redirecting to Home Page after Adding Expense

To provide a seamless user experience, we want to redirect the user to the home page after they successfully add an expense. This will allow them to see the updated expense list without having to manually navigate back to the home page.

Accessing the History Prop

To enable the redirect functionality, we will access the history prop provided by React Router. This prop allows us to programmatically navigate between different pages in our application.

Using the Push Method to Redirect to Home Page

After successfully adding an expense, we will use the push method from the history prop to redirect the user to the home page. This method will update the browser's URL and load the home page without triggering a full page reload.

Conclusion

In this article, we discussed two important features: adding a drop-down for sorting expenses and creating an expense form for adding new expenses. We also learned how to handle user interactions, dispatch actions, and redirect the user to different pages in our application. By implementing these features, we have improved the functionality and user experience of our expense tracking app.