dimanche 21 février 2021

Javascript conditions for state form option

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