text: import React from 'react';
  import { connect } from 'react-redux';
  import ExpenseForm from './ExpenseForm';
  import { editExpense, removeExpense } from '../actions/expenses';
  
  export class EditExpensePage extends React.Component {
      onSubmit = (expense) => {
          this.props.editExpense(this.props.expense.id, expense);
          this.props.history.push('/');
          console.log('updated', expense)
      }
      onRemove = () => {
          this.props.removeExpense({id: this.props.expense.id});
          this.props.history.push('/');
      }
      render() {
          return (
              <div>
                  <ExpenseForm 
                      expense={this.props.expense}
                      onSubmit={this.onSubmit}
                  />
                  <button onClick={this.onRemove}>Remove</button>
              </div>
          )
      }
  }
  
  const mapStateToProps = (state, props) => {
      const id = props.location.pathname.slice(6)
      
      return {
          expense: state.expenses.find((expense) => expense.id === id)
      };
  };
  
  const mapDispatchToProps = (dispatch) => ({
      editExpense: (id, expense) => dispatch(editExpense(id, expense)),
      removeExpense: (expense) => dispatch(removeExpense(expense))
  })
  
  export default connect(mapStateToProps, mapDispatchToProps)(EditExpensePage);