Project Repo: https://github.com/kelsey-d/savings-calculator
I'm looking to enhance my understanding of React and Next.js through infamous beginner projects.
This one is a simple calculator that when given a savings goal as a target date it returns the balance at that date or if given as a target balance it will return the date the balance is reached.
It is a work in progress so please excuse its appearance. I will style it last. Right now I'm working on the logic. I am experiencing a bug.
Since the calculator has two modes "date" and "balance", I want only the relevant inputs, "Target Month" and "Target Balance" respectively, to show based on the mode chosen.
By default the "Target Month" is shown but the user can use the DATE and BALANCE buttons above the input to toggle between the two. However, when BALANCE is clicked the inputs are switched only momentarily before resetting back to "Target Month."
Can you find the error?
I can gather from the way I abused the useState hook it was a matter of time before something broke. It might be a re-render is resetting the state but I don't know which one.
Any feedback is appreciated but I am looking for any explanation of the bug and tips on better organization of state, functions and components.
Thank you!
Top comments (0)