Financial Details view, update, delete with DB done!

WebFrontEnd/smartcoach-frontend/src/Components/Admin/view_financial_details.js

+import React, {Component} from "react";
+import {Link} from "react-router-dom";
+import axios from "axios";
+
+const Finance = props => (
+    <tr>
+        <td>{props.finance.account_month}</td>
+        <td>Rs.{props.finance.total_income}</td>
+        <td>Rs.{props.finance.total_expenses}</td>
+        <td>Rs.{props.finance.gross_revenue}</td>
+        <td>
+            <Link style={{color:"black"}} to={"/admin/finance/edit/"+props.finance._id}><button style={{paddingRight:"20px",width:"auto"}} className="btn btn-warning mr-1"><i className="fa fa-pencil"> Edit</i></button></Link>
+            <button style={{width:"auto",color:"black"}} className="btn btn-danger" onClick={() => {props.deleteFinance(props.finance._id)}}><i className="fa fa-trash"> Delete</i></button>
+        </td>
+    </tr>
+);
+
+export default class ViewFinancialDetails extends Component{
+    constructor(props) {
+        super(props);
+
+        this.deleteFinance = this.deleteFinance.bind(this);
+
+        this.state = {
+            finance : []
+        };
+    }
+
+    componentDidMount() {
+        axios.get('http://localhost:5000/admin/finance/')
+            .then(response => {
+                this.setState({ finance : response.data})
+                // console.log(this.state);
+            })
+            .catch(error =>{
+                console.log(error);
+            })
+    }
+
+    deleteFinance(id){
+        axios.delete('http://localhost:5000/admin/finance/'+id)
+            .then(res => console.log(res.data));
+
+        this.setState({
+            finance : this.state.finance.filter(el => el._id !== id)
+        })
+    }
+
+    financialList(){
+        return this.state.finance.map(currentdetails => {
+            return <Finance finance={currentdetails} deleteFinance={this.deleteFinance} key={currentdetails._id} />;
+        })
+    }
+
+
+    render() {
+        return(
+            <div>
+                <div className="app-page-title">
+                    <div className="page-title-wrapper">
+                        <div className="page-title-heading">
+                            <div className="page-title-icon">
+                                <i className="pe-7s-display1 fa fa-line-chart"></i>
+                            </div>
+                            <div>
+                                Financial Details
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div className="col-lg-12">
+                    <div className="main-card mb-3 card">
+                        <div className="card-body">
+                            <table className="mb-0 table table-striped">
+                                <thead>
+                                    <tr>
+                                        {/*<th>#</th>*/}
+                                        <th>Account Month</th>
+                                        <th>Gross Income</th>
+                                        <th>Gross Expenses</th>
+                                        <th>Gross Revenue</th>
+                                        <th>Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {this.financialList()}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
\ No newline at end of file