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');
}
})