I'm react newbie and this is my first question on stackoverflow. I have a budget app where user choose option "Income" or "Expense" and two inputs - Name and Amount. My app is based on 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 using useContext for transaction.
Everything 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 code below IF condition doesn't work but code execute first function, in this case: addTransaction(newExpenseTransaction).
In global state everything looking good.
So, my question is: How I should condition form option state to return addTransaction(newIncomeTransaction) or addTransaction(newExpenseTransaction)?
import React, { useState, useContext } from "react";
import classes from "./AddTransactionForm.css";
import { GlobalContext } from "../../../context/GlobalState";
export const Form = () => {
const [text, setText] = useState("");
const [amount, setAmount] = useState(0);
const [option, setOption] = useState("");
const options = [
{ label: "Income", value: "income" },
{ label: "Expense", value: "expense" },
];
const { addTransaction } = useContext(GlobalContext);
const onSubmit = (e) => {
e.preventDefault();
const newExpenseTransaction = {
id: Math.floor(Math.random() * 10000),
text,
amount: -Math.abs(amount),
option,
};
// addTransaction(newExpenseAmount);
const newIncomeTransaction = {
id: Math.floor(Math.random() * 10000),
text,
amount: parseInt(amount),
option,
};
// addTransaction(newIncomeAmount);
if (addTransaction.option === options["expense"]) {
return addTransaction(newExpenseTransaction);
} else if (addTransaction.option === options["income"]) {
return addTransaction(newIncomeTransaction);
}
};
return (
<div>
<form className={classes.form} onSubmit={onSubmit}>
<select value={option} onChange={(e) => setOption(e.target.value)}>
{options.map((option) => (
<option key={option.key} value={option.value}>
{option.label}
</option>
))}
</select>
<input
type="text"
value={text}
onChange={(e) => setText(e.target.value)}
placeholder="Name"
/>
<input
type="text"
value={amount}
onChange={(e) => setAmount(e.target.value)}
placeholder="PLN"
/>
<input type="submit" value="Send" />
</form>
</div>
);
};
Aucun commentaire:
Enregistrer un commentaire