title: Updating a model class in React JS during development seems to immediately erase any changes to data
body: <p>So, I like to use a model class with dummy data just cached (not persistent) during development. I'm having a component make changes to the model.js class's data based on form data entered and submitted by the user (I call preventDefault() on submission). Everything seems to be fine except that the new data seems to be deleted just after adding them to model.js. I have verified this using breakpoints and console.log(). The whole webpage seems to be refreshing and IDK why. I'm not even calling setState() as of now.</p>
  <p>Edit: to be clear, the model class at the bottom of the code is not maintaining updates with it's data. I haven't worried about rerendering the Component using it as its state yet.</p>
  <pre><code>    class ManageFinances extends React.Component {
          constructor(props) {
            super(props);
            this.state = {
              model: new FinancesModel(),
            }
      
            this.addFinanceItem = this.addFinanceItem.bind(this);
          }
      
          getFinanceItemsView(financeItems) {
            ... /*not important*/
          }
      
          // The callback that seems to be giving me issues
          addFinanceItem(name, amount, type) {
            this.state.model.addMonthlyFinanceItem(name, amount, type)
            console.log(this.state);
            //this.setState();
          }
      
          render() {
            const monthlyFinanceItems = this.state.model.getMonthlyFinanceItems();
            const monthlyFinanceItemsView = this.getFinanceItemsView(monthlyFinanceItems);
            // const difference = monthlyIncome - monthlyExpenses.reduce((x, a) =&gt; x + a);
            
            return (
              &lt;div className=&quot;home&quot;&gt;
                &lt;div className=&quot;month-container&quot;&gt;
                  &lt;input type=&quot;month&quot; className=&quot;month-selector&quot;&gt;&lt;/input&gt;
                &lt;/div&gt;
                &lt;div className=&quot;home-main&quot;&gt;
                  &lt;div className=&quot;row&quot;&gt;
                    &lt;FinanceItemForm submitCallback={this.addFinanceItem} /&gt; // Passed to the form as a prop
                  &lt;/div&gt;
                  &lt;div className=&quot;row&quot;&gt;
                    &lt;table className=&quot;finance-table&quot;&gt;
                      &lt;colgroup&gt;
                        &lt;col className=&quot;finance-name-column&quot;&gt;&lt;/col&gt;
                        &lt;col className=&quot;finance-amount-column&quot;&gt;&lt;/col&gt;
                      &lt;/colgroup&gt;
                      &lt;tbody&gt;
                        {monthlyFinanceItemsView[0]}
                      &lt;/tbody&gt;
                    &lt;/table&gt;
                    &lt;div className=&quot;column&quot;&gt;
                      {monthlyFinanceItemsView[1]}
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            );
         }
      }
      
      // The component with the form
      class FinanceItemForm extends React.Component {
          constructor(props) {
              super(props);
              this.state = {
                  type: 'Income',
                  name: '',
                  amount: 0.00,
              }
      
              this.handleChangeType = this.handleChangeType.bind(this);
              this.handleChangeName = this.handleChangeName.bind(this);
              this.handleChangeAmount = this.handleChangeAmount.bind(this);
          }
      
          handleChangeType (event) {
              this.setState({
                  type: event.target.value,
              });
          }
      
          handleChangeName (event) {
              this.setState({
                  name: event.target.value,
              });
          }
      
          handleChangeAmount (event) {
              this.setState({
                  amount: event.target.value,
              });
          }
      
          render() {
              return (
                  &lt;form 
                      className=&quot;finance-item-form&quot; 
                      onSubmit={(event) =&gt; {
                          event.preventDefault();
                          this.props.submitCallback(this.state.name, 
                                                    this.state.amount, 
                                                    this.state.type)
                      }}
                  &gt;
                      &lt;div className=&quot;input-container&quot;&gt;
                          &lt;div className=&quot;input-row1&quot;&gt;
                              &lt;select onChange={this.handleChangeType}&gt;
                                  &lt;option&gt;Income&lt;/option&gt;
                                  &lt;option&gt;Expense&lt;/option&gt;
                              &lt;/select&gt;
                              &lt;div className=&quot;label-and-field&quot;&gt;
                                  &lt;label htmlFor=&quot;item-name&quot;&gt;Enter Name:&lt;/label&gt;
                                  &lt;input 
                                      type=&quot;text&quot; 
                                      name=&quot;item-name&quot; 
                                      maxLength=&quot;50&quot; 
                                      onChange={this.handleChangeName}
                                  &gt;&lt;/input&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div className=&quot;input-row2&quot;&gt;
                              &lt;div className=&quot;label-and-field&quot;&gt;
                                  &lt;label htmlFor=&quot;item-amount&quot;&gt;Enter Amount:&lt;/label&gt;
                                  &lt;input 
                                      type=&quot;number&quot; 
                                      name=&quot;item-amount&quot; 
                                      step=&quot;.01&quot; 
                                      min=&quot;0.00&quot; 
                                      onChange={this.handleChangeAmount}
                                  &gt;&lt;/input&gt;
                              &lt;/div&gt;
                              &lt;input type=&quot;submit&quot; value=&quot;Add&quot;&gt;&lt;/input&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;
              );
          }
      }
  
  // The dummy model class for development
  class FinancesModel {
      constructor() {
          this.financeItems = [
              ['Day Job', 5145, 92, 'Income'],
              ['Netflix', 25, 67, 'Expense'],
              ['Hidive', 5, 98, 'Expense'],
              ['Voice Acting Royalties', 20, 0, 'Income'],
              ['Student Loans', 400, 2, 'Expense'],
              ['Rent', 900, 0, 'Expense'],
              ['5th Place at Professional Smash Bros Tournament HD', 40, 2, 'Income'],
          ];
      }
  
      addMonthlyFinanceItem(name, amount, type) {
          const dollars = Math.floor(amount);
          const cents = amount - dollars;
          const financeItem = [name, dollars, cents, type];
          this.financeItems.push(financeItem);
      }
  
      getMonthlyFinanceItems() {
          return this.financeItems.slice();
      }
  
      getFinanceItemName(financeItem) {
          return financeItem[0];
      }
  
      getFinanceItemAmount(financeItem) {
          const dollars = financeItem[1];
          const cents = financeItem[2] / 100;
          return dollars + cents;
      }
  
      getFinanceItemAmountPrettyString(financeItem) {
          const dollars = financeItem[1];
          const cents = financeItem[2];
          const str = cents &lt; 10 ? '0' + cents : cents;
          return '$' + dollars + '.' + str;
      }
  
      getFinanceItemType(financeItem) {
          return financeItem[3];
      }
  
      getFinanceItemCount() {
          return this.monthlyIncomes.length + this.financeItems.length;
      }
  }
  </code></pre>