Trailhead error: The campingList component isn't defining a handler correctly to listen for the addItemEvent event

Question

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

Answer 1

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}" />