How can I set react Hooks to another value when it is already set

user_12351934 0
Viewed 296

This is my first time using React hooks and I have stumbled across a problem I can't solve. I am using the formAmount hook to get the input value of store it in state.amount. When that happens the amount is supposed to reduce totaling to a number whenever a user puts it in. The problem is that I can't make a new array in the onChange event because it catalogs every stroke of the key and it doesn't give me the complete number and I can't set it directly on the state.amount. How can I get that amount and store in an array?

Here is my code:

const Transactions = () => {
    const [state, setState] = useState([
        {
            expense: [],
            amount: [],
            id: ''
        }

    ])

    const [formExpense, setFormExpense] = useState('')
    const [formAmount, setFormAmount] = useState([])



    const handleSubmit = (e) => {
        e.preventDefault();

        addExpense()
        e.target.reset()
    }
    // add total of array of amount
    let sum = formAmount.reduce((accumulator, currentValue) => {
        { return accumulator += currentValue }
    }, 0)

    // push value of input to array
    const addExpense = (e) => {

        setState([...state, { expense: formExpense, amount: [...formAmount], id: Math.random() * 100 }])

    }


    return (
        <div className="transactions">

            <div className="expenses">
                <form onSubmit={handleSubmit}>
                    <input
                        type="text"
                        id="expense"
                        className="formfield"
                        name="expense"
                        placeholder="Expense..."
                        onChange={(e) => setFormExpense(e.target.value)}
                    />
                    <input
                        type="text"
                        id="amount"
                        className="formfield"
                        name="amount"
                        placeholder="Amount..."
                        onChange={(e) => setFormAmount([Number(e.target.value)])}
                    />
                    <button type="submit">Submit</button>
                </form>
            </div>
            <div className="finalbalance ">

                <div className="finalexpense final">
                    Total Expense
                    {'$' + sum.toLocaleString()}
                    {
                        state.map(stat => {
                            return (

                                <div key={stat.id}>

                                    <h3 className="outputexpense output">{stat.expense + stat.amount}</h3>
                                </div>


                            )
                        })
                    }

                </div>
            </div>
        </div>


    )
}
react-hooks reactjs javascript
1 Answers

Here's is the answer for you. I have done a Fiddle as well here

function Transaction(props){

    const [listOfExpenses, setlistOfExpenses] = React.useState([]);
    const [expense, setExpense] = React.useState("");
    const [amount, setAmount] = React.useState(0);
    const [totalExpenditure, setTotalExpenditure] = React.useState(0);


    const handleInputChange = (hookSetterMethod) => (e) =>{
        let {value} = e.target;
        return hookSetterMethod(value);
    }

    const addExpense = (expenseObject) => {
        setlistOfExpenses([...listOfExpenses, expenseObject])
    }

    const getTotalExpenditure = (listOfExpenses) =>
    {
            if(listOfExpenses.length > 0)
        {
          let tempExpenseAmountList = listOfExpenses.map((expense, id)=>{
              if(expense.amount)
              {
                  return expense.amount;
              }else{
                  return 0;
              }
          });

          return tempExpenseAmountList.reduce((accumulator, currentVal)=>{
              return Number(accumulator) + Number(currentVal);
          })
        }
        return 0;
    }

    React.useEffect(()=>{
        setTotalExpenditure(getTotalExpenditure(listOfExpenses));
    }, [listOfExpenses])

    const handleFormSubmission = (e) =>{
        e.preventDefault();
        addExpense({
            amount,
            expense
        });
    }
    
    const renderExpenses = (expenseList) => {
      return expenseList.map((expense, id)=>{
        return (
          <tr key={id}>
            <td>{++id}</td>
            <td>{expense.expense}</td>
            <td>: ${expense.amount}</td>
          </tr>
        )
      });
    }

    return(
        <div>
            <div>
                <h1>Add your expenses below</h1>
                <form onSubmit={handleFormSubmission}>
                    <div>
                        <label>Expense</label>
                        <input value={expense} onChange={handleInputChange(setExpense)} />
                    </div>
                    <div>
                        <label>Amount</label>
                        <input value={amount} onChange={handleInputChange(setAmount)} />
                    </div>
                    <div>
                        <button type="submit">Add Expense</button>
                    </div>
                </form>
            </div>
            <hr />
            <div>
              <table>
                <tr>
                  <th>
                      <td>Id</td>
                      <td>Expense</td>
                      <td>Amount</td>
                  </th>
                </tr>
                {renderExpenses(listOfExpenses)}
                <tr className="total">
                  <td>Total Expenses</td>
                  <td>: ${totalExpenditure}</td>
                </tr>
              </table>
            </div>
        </div>
    );
}


ReactDOM.render(<Transaction />, 
document.getElementById("root"));
table{
  margin-top: 15px;
}

.total{
  display: table;
  border-top: 1px solid #434649;
  border-bottom: 2px double #434649;
  color: #f80000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

user_99515700
Related