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;