Hey folks,

I'm trying to achieve a very simple thing, creating a new record in SF from a Lightning Component. But facing a weird situation/issue. While submitting the form it's going in an infinite loop. I doubt there is a silly mistake which I'm unable to identify hence need another pair of eyes. Here is the code snippet. 

<aura:component implements="force:appHostable">
  <ltng:require styles="{!$Resource.SLDSv1 + 
       '/assets/styles/salesforce-lightning-design-system-ltng.css'}"/>
  <aura:attribute name="expenses" type="chirag__Expense__c[]"/>
  <aura:attribute name="newExpense" type="chirag__Expense__c"
         default="{ 'sobjectType': 'chirag__Expense__c',
                         'Name': '',
                         'chirag__Amount__c': 0,
                         'chirag__Client__c': '', 
                         'chirag__Date__c': '',
                         'chirag__Reimbursed__c': false
                       }"/>
  
  <!-- Attributes for Expense Counters -->
  <aura:attribute name="total" type="Double" default="0.00" />
  <aura:attribute name="exp" type="Double" default="0" />

  <!-- Input Form using components -->
  <div class="container">
    <form class="slds-form--stacked">
      <div class="slds-form-element slds-is-required">
        <div class="slds-form-element__control">

       <!-- If you registered a namespace,
            the attributes include your namespace.
            For example, value="{!v.newExpense.myNamespace__Amount__c}" -->

          <ui:inputText aura:id="expname" label="Expense Name"
                        class="slds-input"
                        labelClass="slds-form-element__label"
                        value="{!v.newExpense.Name}"
                        required="true"/>
         </div>
       </div>
       <div class="slds-form-element slds-is-required">
         <div class="slds-form-element__control">
           <ui:inputNumber aura:id="amount" label="Amount"
                           class="slds-input"
                           labelClass="slds-form-element__label"
                           value="{!v.newExpense.Amount__c}"
                           placeholder="20.80" required="true"/>
          </div>
        </div>
        <div class="slds-form-element">
          <div class="slds-form-element__control">
            <ui:inputText aura:id="client" label="Client"
                          class="slds-input"
                          labelClass="slds-form-element__label"
                          value="{!v.newExpense.Client__c}"
                          placeholder="ABC Co."/>
           </div>
         </div>
         <div class="slds-form-element">
           <div class="slds-form-element__control">
             <ui:inputDateTime aura:id="expdate" label="Expense Date"
                               class="slds-input"
                               labelClass="slds-form-element__label"
                               value="{!v.newExpense.Date__c}"
                               displayDatePicker="true"/>
            </div>
          </div>
          <div class="slds-form-element">
            <ui:inputCheckbox aura:id="reimbursed" label="Reimbursed?"
                              class="slds-checkbox"
                              labelClass="slds-form-element__label"
                              value="{!v.newExpense.Reimbursed__c}"/>
            <ui:button label="Submit" 
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.createExpense}"/>
           </div>
    </form>
  </div><!-- ./container-->

  <!-- Expense Counters -->
  <div class="container slds-p-top--medium">
        <div class="row">
            <div class="slds-tile ">
                <!-- Make the counter red if total amount is more than 100 -->
                <div class="{!v.total >= 100 
                     ? 'slds-notify slds-notify--toast slds-theme--error slds-theme--alert-texture' 
                     : 'slds-notify slds-notify--toast slds-theme--alert-texture'}">
                    <p class="slds-tile__title slds-truncate">Total Expenses</p>
                    $<ui:outputNumber class="slds-truncate" value="{!v.total}" format=".00"/>
                </div>
            </div>
            <div class="slds-tile ">
                <div class="slds-notify slds-notify--toast slds-theme--alert-texture">
                      <p class="slds-tile__title slds-truncate">No. of Expenses</p>
                      <ui:outputNumber class="slds-truncate" value="{!v.exp}"/>
                  </div>
            </div>
        </div>
    </div>
          <!-- Display expense records -->
          <div class="container slds-p-top--medium">
              <div id="list" class="row">
                 <aura:iteration items="{!v.expenses}" var="expense">

                     <!-- If you’re using a namespace, 
                          use the format 
                          {!expense.myNamespace__myField__c} instead. -->

                     <p>{!expense.Name}, {!expense.Client__c}, 
                        {!expense.Amount__c}, {!expense.Date__c}, 
                        {!expense.Reimbursed__c}</p>                     
                </aura:iteration>
              </div>
          </div> 
</aura:component>

 

({
	doInit : function(component, event, helper) {
		var action = component.get('c.getExpenses');
        action.setCallback(this, function(response) {
           var state = response.getState();
            if (component.isValid() && state == "SUCCESS") {
                component.set("v.expenses", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });	 
        $A.enqueueAction(action);
	},
    
    createExpense : function(component, event, helper) {
		//update expense counters
		console.log('createExpense');
        alert('createExpense');
		var expense = component.get("v.newExpense");
        debugger;
		helper.createItem(component, expense);		 
	}
})

 

({
	helperMethod : function() {
		
	},
    
    createItem: function(component, expense) {
		console.log('createItem');
        var action = component.get("c.createExpense");
        action.setParams({
            "expense": expense
        });
        action.setCallback(this, function(response){
        var state = response.getState();
        if (component.isValid() && state == "SUCCESS") {
            console.log('state+++' + state);
            var campings = component.get("v.expenses");
            //campings.push(response.getReturnValue());
            component.set("v.expenses", response.getReturnValue());
        }
    	});
    	
        $A.enqueueAction(action);
	}
})

I suspect there is something wrong with helper method, it is calling back the controller method again and again.

Thanks in advance.