I’ve been engaged on a newbie venture, studying React and Typescript. The venture is an expense supervisor software and I’ve tried splitting most of my purposes into easy quick parts.
For the EditExpensePage part I’ve linked it to the Redux retailer for the app, so as to have the ability to entry the state and to dispatch actions.

I want to get some suggestions on the code I’ve written, and methods I might enhance it.

The Expense interface :

export interface Expense {
    id: string;
    description: string;
    be aware?: string;
    quantity: quantity;
    createdAt: quantity;
}

The EditExpensePage :

import * as React from "react";
import { RouteComponentProps } from "react-router";
import * as Redux from 'redux';
import {withRouter} from 'react-router';
import {join} from 'react-redux';
import { Expense } from "../varieties/Expense";
import { AppState } from "../Retailer/configureStore";
import { compose } from "redux";
import ExpenseForm from "./ExpenseForm";
import { AppActions } from "../varieties/Actions";
import { addExpense, removeExpense } from "../Actions/bills";

sort PathParamsType = {
  id: string;
};
//part personal props
sort PropsType = RouteComponentProps<PathParamsType> & {
  id: string;
};

interface StateProps {
    bills: Expense[]
}

interface DispatchProps{
    addExpense : (expense : Expense) => any,
    removeExpense : (expenseId : string) => any
}

sort Props = PathParamsType & PropsType & StateProps & DispatchProps;

perform GetSelectedExpense(id : string, bills : Expense[]){
    for (var i=0 ; i<bills.size; i++){
        if (bills[i].id === id)
        {
            return bills[i];
        }
    }
}

const EditExpensePage: React.FunctionComponent<Props> = (props): any => {
    let selectedExpense = GetSelectedExpense(props.match.params.id, props.bills)
    return (
    <ExpenseForm description={selectedExpense?.description} quantity={selectedExpense?.quantity} onSubmit={(expense) => {

        for (let i = 0; i< props.bills.size ; i++){
            if (props.bills[i] === selectedExpense)
            {
                props.removeExpense(selectedExpense.id);
                props.addExpense(expense);
            }
        }

    }}/>
 )
};

const mapStateToProps = (state : AppState) :StateProps => {
    return({
        bills : state.bills
    })
}

const mapDispatchToProps = (dispatch : Redux.Dispatch<AppActions>) : DispatchProps => {
    return {
        addExpense : (expense : Expense) => dispatch(addExpense(expense)),
        removeExpense : (id : string) => dispatch(removeExpense(id))
    }
}

export default compose(
    withRouter,
    join(mapStateToProps, mapDispatchToProps))(EditExpensePage);
```