State only update when I click button twice

[adefesoq]

Hey everyone,

I’m currently working on a side project (an expense tracker). The project is currently on hold due to a logic bug I couldn’t solve and I will need y’all to figure out the problem.

Overview of the Project (Expenses page):

To create an expenses, you have to -

1.) Click a category e.g Rent: this will set the expense category to setExpenseCategory('Rent)
2. ) enter an amount
3.) click create button

The Problem:

• from the console inside the onclick function, When I clicked a particular category , the category value doesn’t change unless I click the category twice.

• from the console outside the onclick function, the category value changes on first click

what I have tried
I added the category state as a dependency to the useEffect so that the component re-renders when the category changes. This haven’t still solve the bug

Link to the app repository https://github.com/FesoQue/ExpenseTracker

Link to the expenses component:
https://github.com/FesoQue/ExpenseTracker/blob/main/src/pages/Expenses.jsx

PS: The UI of the project is 80% done, you can clone and check it out on locally on your pc

[ServerStorm]

Hi,

Maybe try something like btn_category.addEventListener("click", () => { … })

Using event listeners tend to catch click events pretty well.

Cheers,
Steve