[Project Expense Cards] - Inverse data flow woes!

I'm done for the night but the past 4 hours after I got off work, I put more hours into this prototype React app.  Here's a couple of things I accomplished today!

"Add New Card" button

Added a new component for another button that would now add a new expense card to an array of expense cards.  The array is sorted in descending order too!  In order to get the sorting correctly finished, I had to add reverse() to where I called map() on the array like below:

  1. buildListOfExpenseCards() {
  2. // Build the collection of expense cards.
  3. var expenseCards = this.state.expenseCards.map((expenseCard) => {
  4. return (
  5. <ExpenseCardContainer
  6. key={expenseCard.id}
  7. id={expenseCard.id}
  8. />
  9. )
  10. }).reverse();
  11.  
  12. return expenseCards;
  13. }

Total allocated amount updates in real-time

When a user puts in an amount into one of the input fields for "Allocated Amount", then the "Total Allocated" value should update as the user enters a numerical value.  Just when I thought I had it the first time around, I instead ended up spending a good hour and a half troubleshooting why my values kept lagging behind by one update.  For example, as I would type into the input field, "1", nothing showed up for "Total Allocated".  Then as I typed and the value in the field became "12", then I saw that the "Total Allocated" value updated to just "1".  The solution? DO NOT pass the value from the state back up!  I forgot that when calling setState(), the state doesn't actually automatically update and catch up to what's currently there.  Below is what the code used to look like that was giving me trouble:

  1. handleUserInput(e) {
  2. const value = e.target.value;
  3. const id = this.props.id;
  4.  
  5. this.setState({
  6. value: value
  7. });
  8.  
  9. this.props.onChange(id, this.state.value);
  10. }

Now, below is the current code that required a minor change to get it working properly:

  1. handleUserInput(e) {
  2. const value = e.target.value;
  3. const id = this.props.id;
  4.  
  5. this.setState({
  6. value: value
  7. });
  8.  
  9. this.props.onChange(id, value);
  10. }

Instead of passing "this.state.value", I passed "value".  D'oh!  Lesson learned at least!

Check out below for a screenshot of the progress!

 

2016-12-07 21_43_11-Finance.png