0

I'm am an all around new coder and trying to learn React by building a small app that calculates how much cash one has (an app my kids can use). I am dynamically creating 5 components, each with an input field. Those input fields accepts an entry (a number) and multiplies that input by the fixed amount that I am mapping out from an object ($20, $10, $5, $2 and $1 fixed amounts) for each of the 5 components. That part works great. $10 x 2 is showing me $20.

However, to add up all 5 of the bill amount totals as they are keyed in, I was thinking I need to put them into an array and then get the sum of the array to show the final total. Things aren't working and I've been searching this past week for a way to code my onChange handler. I'm just flat out stuck. Any help would be so greatly appreciated. I am very sorry for any hard to read code.

Here's the jsfiddle (please excuse the lack of styling)

Improve this question

2 Answers 2

Reset to default
0

I was able to find the error easily by opening the javascript console (F12 or right click -> inspect).

The error was thrown because you did pass handleCashInput as a prop to CashItemsList

<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />

Also using an array with reduce was not a good idea because if you delete an amount and re-enter it, the total will be wrong. I did the following to solve it:

  1. I use an object instead of an array
    { 1: 0, 2: 0, 3: 0, 4: 0, 5: 0}

  2. I pass the bill id to handleCashInput to be able to change the amount this.props.onChange(this.props.bill.id, newBillSubTotal)

  3. I update the correct bill value in the object like this
    const cashTemp = this.state.billFinalTotal;
    cashTemp[id] = newBillFinalTotal;
  4. I calculated the total by adding every value of the object together
    const bt = this.props.billFinalTotal;
    const total = bt[1] + bt[2] + bt[3] + bt[4] + bt[5];

Here's my JSFiddle

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thank you very much. You absolutely rock. I was dumb for not passing the handle as a prop. Your method for getting the final total works beautifully - exactly how I was hoping yet not close to what I was thinking. You solved it in minutes - I have so much to learn. Thanks again.
0

You had two issues in your fiddle.

First, you didn't pass an onChange prop to CashItemsList from Parent. So I changed:

<CashItemsList key={bill.id} bill={bill} />

to:

<CashItemsList key={bill.id} bill={bill} onChange={this.handleCashInput} />

The second issue is that the return of array.push() is not the full array, so in your "handleCashInput()" method on Parent, using array.concat() instead of array.push() solved that issue, by changing this:

const cashTemp = this.state.billFinalTotal.push(newBillFinalTotal)

to:

const cashTemp = this.state.billFinalTotal.concat(newBillFinalTotal)

Here's an updated fiddle that works: https://jsfiddle.net/ggtu71gh/1/

Note: it doesn't seem that you've implemented the subtotal functionality so this only attempts to fix the errors in what you've already implemented.

Improve this answer

3 Comments

Thanks for the reply. I totally missed the handler props passing. However, the .concat doesn't work. It keeps adding and never removing, which is part of my own crappy code. Thanks again though.
Oh yeah, that won't work when removing for sure, I really tried to just fix errors in what was there. It may be easier to serialize and sum the whole form whenever any of the inputs change.
I hear ya - I had multiple issues. Thanks for the tip. I don't much about serializing so I'll look into it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.