ReactJS | List Expenses (Example)

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS List Expenses.

Open up ExpenseEntryItemList.js and import connect from redux library.

import { connect } from 'react-redux';

Import addExpenseList and deleteExpense actions.

import { getExpenseList, deleteExpense } from '../actions/expenseActions';

Next, add constructor with props.

constructor(props) { 
   super(props); 
}

Call getExpenseList in componentDidMoint() life cycle.

componentDidMount() { 
   this.props.getExpenseList(); 
}

Next, write a method to handle the remove expense option.

handleDelete = (id,e) => { 
   e.preventDefault(); 
   this.props.deleteExpense(id); 
}

Let us write a function, getTotal to calculate the total expenses.

getTotal() {
   let total = 0;
   if (this.props.expenses != null) {
      for (var i = 0; i < this.props.expenses.length; i++) {
         total += this.props.expenses[i].amount
      }
   }
   return total;
}

Next, update the render method and list the expense items.

render() {
   let lists = [];

   if (this.props.expenses != null) {
      lists = this.props.expenses.map((item) =>
         <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.amount}</td>
            <td>{new Date(item.spendDate).toDateString()}</td>
            <td>{item.category}</td>
            <td><a href="#"
               onClick={(e) => this.handleDelete(item.id, e)}>Remove</a></td>
         </tr>
      );
   }
   return (
      <div>
         <table>
            <thead>
               <tr>
                  <th>Item</th>
                  <th>Amount</th>
                  <th>Date</th>
                  <th>Category</th>
                  <th>Remove</th>
               </tr>
            </thead>
            <tbody>
               {lists}
               <tr>
                  <td colSpan="1" style={{ textAlign: "right" }}>Total Amount</td>
                  <td colSpan="4" style={{ textAlign: "left" }}>
                     {this.getTotal()}
                  </td>
               </tr>
            </tbody>
         </table>
      </div>
   );
}

READ: ReactJS | State Management (Example)

Next, write the mapStateToProps and mapDispatchToProps methods.

const mapStateToProps = state => {
   return {      
      expenses: state.data
   };
};
const mapDispatchToProps = {
   getExpenseList,
   deleteExpense
};

Here, we have mapped the expenses items from redux store to expenses property and then attach dispatcher, getExpenseList and deleteExpense to component properties.

Finally, connect component to Redux store using connect api.

export default connect(
   mapStateToProps,
   mapDispatchToProps
)(ExpenseEntryItemList);

The complete code of the application is as follows -

import React from "react";
import { connect } from 'react-redux';
import { getExpenseList, deleteExpense } from '../actions/expenseActions';

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   componentDidMount() {
      this.props.getExpenseList();
   }
   handleDelete = (id, e) => {
      e.preventDefault();
      this.props.deleteExpense(id);
   }
   getTotal() {
      let total = 0;
      if (this.props.expenses != null) {
         for (var i = 0; i < this.props.expenses.length; i++) {
            total += this.props.expenses[i].amount
         }
      }
      return total;
   }
   render() {
      let lists = [];
      if (this.props.expenses != null) {
         lists = this.props.expenses.map((item) =>
            <tr key={item.id}>
               <td>{item.name}</td>
               <td>{item.amount}</td>
               <td>{new Date(item.spendDate).toDateString()}</td>
               <td>{item.category}</td>
               <td><a href="#"
                  onClick={(e) => this.handleDelete(item.id, e)}>Remove</a>
               </td>
            </tr>
         );
      }
      return (
         <div>
            <table>
               <thead>
                  <tr>
                     <th>Item</th>
                     <th>Amount</th>
                     <th>Date</th>
                     <th>Category</th>
                     <th>Remove</th>
                  </tr>
               </thead>
               <tbody>
                  {lists}
                  <tr>
                     <td colSpan="1" style={{ textAlign: "right" }}>Total Amount</td>
                     <td colSpan="4" style={{ textAlign: "left" }}>
                        {this.getTotal()}
                     </td>
                  </tr>
               </tbody>
            </table>
         </div>
      );
   }
}
const mapStateToProps = state => {
   return {
      expenses: state.data
   };
};
const mapDispatchToProps = {
   getExpenseList,
   deleteExpense
};
export default connect(
   mapStateToProps,
   mapDispatchToProps
)(ExpenseEntryItemList);

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

READ: ReactJS | Expense Manager API (Example)

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS Add Expense (Example).

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.