ReactJS - List Expenses

---

---

Open ExpenseEntryItemList.js and import connect from redux library.

import { connect } from 'react-redux';

Next, import addExpenseList and deleteExpense actions.

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

Next, add constructor with props.

constructor(props) { 
   super(props); 
}

Next, call getExpenseList in componentDidMount() 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); 
}

Now, 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>
   );
}

Next, write mapStateToProps and mapDispatchToProps methods.

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

Here, we have mapped the expenses item from redux store to expenses property and attach distpatcher, getExpenseList and deleteExpense to component properties.

Finally, connect component to Redux store using connect api.

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

The complete source code of the application is given below −

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 using npm command.

npm start

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