# Expense tracker App implementation code

**URL:** <https://forum.codewithmosh.com/t/expense-tracker-app-implementation-code/30316>\
**Category:** React\
**Created:** [December 4, 2024, 5:14pm UTC](https://forum.codewithmosh.com/t/expense-tracker-app-implementation-code/30316 "2024-12-04T17:14:09Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![GToshkova](https://avatars.discourse-cdn.com/v4/letter/g/c2a13f/32.png) [@GToshkova](https://forum.codewithmosh.com/u/GToshkova)\
**Post date:** [December 4, 2024, 5:14pm UTC](https://forum.codewithmosh.com/t/expense-tracker-app-implementation-code/30316/1 "2024-12-04T17:14:09Z")

</div>

Hello everyone,

I was busy doing the “Expense tracker” exercise in the React 18 course. After completing the task I decided to compare my implementation to Mosh’s. However, after checking the course repo in GitHub, I couldn’t find the code for the App component for this exercise. I did, of course, watch the videos, but it would’ve been nicer to have it in the repo too so you can check the entire code side to side with yours. So, to anyone looking for this, here’s the App implementation code / I’ve also published a pull request in Mosh’s repo if that could be of use to be added/:

Within App.tsx :  
import { useState } from “react”;  
import ExpenseList from “./expense-tracker/components/ExpenseList”;  
import ExpenseFilter from “./expense-tracker/components/ExpenseFilter”;  
import ExpenseForm from “./expense-tracker/components/ExpenseForm”;

function App() {  
const [selectedCategory, setSelectedCategory] = useState(“”);  
const [expenses, setExpenses] = useState([  
{  
id: 1,  
description: “aaa”,  
amount: 10,  
category: “Utilities”,  
},  
{ id: 2, description: “bbb”, amount: 10, category: “Utilities” },  
{ id: 3, description: “ccc”, amount: 10, category: “Utilities” },  
{ id: 4, description: “ddd”, amount: 10, category: “Utilities” },  
]);

const visibleExpenses = selectedCategory  
? expenses.filter((e) =\> e.category === selectedCategory)  
: expenses;  
return (

  

  
\<ExpenseForm  
onSubmit={(expense) =\>  
setExpenses([…expenses, { …expense, id: expenses.length + 1 }])  
}  
/\>  

  

  
\<ExpenseFilter  
onSelectCategory={(category) =\> setSelectedCategory(category)}  
/\>  

  
\<ExpenseList  
expenses={visibleExpenses}  
onDelete={(id) =\> setExpenses(expenses.filter((e) =\> e.id !== id))}  
/\>  

  
);  
}

export default App;