expense-tracker-react | Expense tracker React frontend | User Interface library
kandi X-RAY | expense-tracker-react Summary
kandi X-RAY | expense-tracker-react Summary
Expense tracker React frontend for expense-tracker Lumen backend.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
Currently covering the most popular Java, JavaScript and Python libraries. See a Sample of expense-tracker-react
expense-tracker-react Key Features
expense-tracker-react Examples and Code Snippets
Community Discussions
Trending Discussions on expense-tracker-react
QUESTION
I'm a React newbie and this is my first question on Stackoverflow. I have a budget app where a user can choose the option "Income" or "Expense" and two inputs - Name and Amount. My app is based on this tutorial project https://github.com/bradtraversy/expense-tracker-react
In newExpenseTransaction/newIncomeTransaction I have:
text: input text - name of income/expense
amount: input amount
option: this state came from form, where user check "income"/"expense"
I am using useContext for transaction.
Everything is working fine except a validation between newExpenseTransaction and newIncomeTransaction.
I need, I think simple if condition based on what's user choosing in form ("income"/"expense").
IF selected option in form/transaction option is "income" RETURN addTransaction(newIncomeTransaction)
IF selected option in form/transaction option is "expense" RETURN addTransaction(newExpenseTransaction)
In the code below the IF condition doesn't work but the code executes the first function, in this case: addTransaction(newExpenseTransaction).
In global state everything looks good.
So, my question is: How should I condition the form option state to return addTransaction(newIncomeTransaction) or addTransaction(newExpenseTransaction)?
...ANSWER
Answered 2021-Feb-21 at 19:50You have a useState Hook, so you can use it.
When you change the selected option, you option state is updated.
it happens on this line:
select value={option} onChange={(e) => setOption(e.target.value)}>
But, please check for initial state, you initialised it with empty string..
If there is no Change, It may stay empty.
now, make the condition like this:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install expense-tracker-react
Considering the backend is up and running, now download or clone this repo.
Open terminal and cd into the directory.
Run npm i to install the dependencies.
Copy and save .env.example file as .env. Set API host in the .env file if necessary.
Finally run the app with npm start.
The app should be running at http://localhost:3000
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page