2

Below is the error I got when I try to complete the trailhead challenge. I have tested it works, but not sure why trailhead will prompt such error.

Challenge Not yet complete... here's what's wrong: The campingList component isn't defining a handler correctly to listen for the addItemEvent event. The handler should listen for an addItemEvent event and then execute the action handleAddItem in the JavaScript controller.

campingList.cmp

<aura:component controller="CampingListController">
<aura:handler name="init" action="{!c.doInit}" value="{!this}" />
<aura:handler name="addItem" event="c.addItemEvent" action="{!c.handleAddItem}" />
<aura:attribute name="items" type="Camping_Item__c[]"/>

<c:campingListForm />

<div class="slds-card slds-p-top--medium">
    <header class="slds-card__header">
        <h3 class="slds-text-heading--small">Items</h3>
    </header>

    <section class="slds-card__body">
        <div id="list" class="row">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
        </div>
    </section>
</div>

campingListController.js

    ({
    doInit : function(component, event, helper){
        var getCampingItemListingAction = component.get('c.getItems');
        getCampingItemListingAction.setCallback(this, function(response){
            var respState = response.getState();
            if(respState == 'SUCCESS'){
                var vItems = component.get('v.items');
                vItems = response.getReturnValue();
                component.set('v.items', vItems);
            }
        });
        $A.enqueueAction(getCampingItemListingAction);
    },
    handleAddItem : function(component, event, helper){
        var newCampingItem = event.getParam('item');

        //var theItems = component.get("v.items");
        //theItems.push(newCampingItem);
        //component.set("v.items", theItems);

        //helper.createItem(component, newCampingItem);
        var saveItemAction = component.get('c.saveItem');
        saveItemAction.setParams({ 'campingItem' :  newCampingItem });

        saveItemAction.setCallback(this, function(response){
            var respState = response.getState();
            console.log(respState);
            if( respState == 'SUCCESS'){
                var theItems = component.get("v.items");
                theItems.push(response.getReturnValue());
                component.set("v.items", theItems);
            }
        });

        $A.enqueueAction(saveItemAction);
    }
})

campingListForm.cmp

<aura:component controller="CampingListController">
<aura:registerEvent name="addItem" type="c:addItemEvent" />

<aura:attribute name="newItem" type="Camping_Item__c"
 default="{ 'sobjectType': 'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false }" required="true"/>

<!-- CREATE NEW ITEM FORM -->
<form class="slds-form--stacked">

  <div class="slds-form-element slds-is-required">
      <div class="slds-form-element__control">
          <lightning:input aura:id="campingItem" type="text" name="name" label="Name" value="{!v.newItem.Name}" required="true" />
      </div>
 </div>

 <div class="slds-form-element slds-is-required">
      <div class="slds-form-element__control">
          <lightning:input aura:id="campingItem" type="number" label="Quantity" name="quantity" value="{!v.newItem.Quantity__c}" step="1" min="1" required="true" />
      </div>
  </div>

  <div class="slds-form-element">
      <div class="slds-form-element__control">
          <lightning:input aura:id="campingItem" type="number" formatter="currency" name="price" label="Price" value="{!v.newItem.Price__c}"  />
      </div>
  </div>

  <div class="slds-form-element">
      <lightning:input aura:id="campingItem" type="checkbox" label="Packed?" name="packed" checked="{!v.newItem.Packed__c}" />
  </div>

  <div class="slds-form-element">
      <lightning:button label="Create Camping Item" onclick="{!c.clickCreateItem}" />
  </div>

</form>
<!-- / CREATE NEW ITEM FORM -->

campingListFormController.js

    ({
    myAction : function(component, event, helper) {

    },
    clickCreateItem: function(component, event, helper) {

        // Simplistic error checking
        var validItem = true;
        validItem = component.find('campingItem').reduce(function(validSoFar, inputCmp){
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);

        if(validItem){
            helper.createItem(component);
        }
    }
})

campingListFormHelper.js

    ({
    helperMethod : function() {

    },
    createItem : function(component){

        var campingItem = component.get("v.newItem");
        console.log(campingItem);

        var adItemEvent = component.getEvent('addItem');
        adItemEvent.setParams({'item': campingItem});
        adItemEvent.fire();
        console.log('Event fired');
    }
})
  • Same code i used but iam endup with the following error "Challenge Not yet complete... here's what's wrong: The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components."Need Suggestion.Thanks in advance – Satya May 23 '18 at 13:02
4

You have issue in aura:handler. It will be

<aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}" />

instead of

<aura:handler name="addItem" event="c.addItemEvent" action="{!c.handleAddItem}" />
  • Same code i used but iam endup with the following error "Challenge Not yet complete... here's what's wrong: The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components."Need Suggestion.Thanks in advance – Satya May 23 '18 at 12:38
  • really interesting that the code still functions with a period instead of a colon. handleAddItem still ran for me. I thought that'd kick out an error. – denvercoder9 Dec 14 '18 at 4:38

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.