How to build extra expense filter in expense tracker?

React
1

Hi all!,
In the react 18 beginner course, building forms section video 12. There is only 1 filter for categories. What if I wanted to add an other column for “Months” and also use filter the expenses by month as well? How do I do that?

Thanks,

2

Hello there, apparently .it’s almost the same. All you have to do is start by modifying the expense objects in the expense list ; How🤔
By adding a date field that will hold the timestamp at which an expense was made.
From this stamp you can extract any time delta you wish to use as a filter or you can go further and extract the current month from the timestamp and save it as the datefield value accurately as month…
After that modification simply replace the options with months of the year

3

The implementation logic will remain almost the same…
Also there is another approach of doin🤗g that,

4

For the UI code implementation I think that’s way easy, however if you need help inform me

5

Hi Harvel, thanks for your reply. Below is my code.
Currently the visibleExpenses is only filtered by category. I wanted to know how to set an other filter for Month.

function App() {
const [selectedCategory, setSelectedCategory] = useState(“”);
const [selectedMonth, setSelectedMonth] = useState(“”);
const [expenses, setExpenses] = useState([
{ id: 1, month: “Jan”, description: “Apple”, amount: 20, category: “Food” },
{ id: 2, month: “Jan”, description: “Apple”, amount: 20, category: “Food” },
{ id: 3, month: “Jan”, description: “Apple”, amount: 20, category: “Food” },
{ id: 4, month: “Jan”, description: “Apple”, amount: 20, category: “Food” },
]);

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

return (
<>
<ExpenseFilter
onSelectCategory={(category) => setSelectedCategory(category)}
onSelectMonth={(month) => setSelectedMonth(month)}
/>
<ExpenseList
expenses={visibleExpenses}
onDelete={(id) =>
setExpenses(expenses.filter((expense) => expense.id !== id))
}
/>
</>
);
}

export default App;

6

Like I priorly informed you, the implementation is the same, it’s just a few things that you will change. In the select element that where categories were rendered as options, replace them with months of the year

7

Be cautious that their value attributes correspond to the month field values in your expense objects. Hope you are getting it

8

Do you need code examples?

9

But i am not trying to replace the categories filter. I wanted to add an other filter for months.
So i can filter by catergories and also by month. Code example will be nice, thanks!

10

OK am gonna build a demo project for you to demonstrate the multiple filters, check on me today

11

thanks man. appreciated

12

thats a link to the demo project i just built, clone it onto your machine and see how i set those two filters on the same data collection, then with that basic knowledge you’ll be able to accomplish your task, :wink: