Lightning Event not firing in Component

Question

I am working through the Aura components trailhead but am running into an issue where the component event is not firing. Here is my code:

CampingList cmp

    <aura:component controller = 'CampingListController' >


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

    <lightning:card title='Camping List' > 
        <aura:iteration items = '{!v.items}' var = 'citem'>
            <c:campingListItem item = "{!citem}"/><br/>
        </aura:iteration>
    </lightning:card>

    </aura:component>

CampingListjs controller

    handleAddItem: function(component, event, helper) {
    var newItem = event.getParam("campingitem");
    helper.createItem(component, newItem);
    }

CampingList helper

createItem : function(component, cil) {
    var action = component.get("c.saveItem");
    action.setParams({
        "cil": cil
    });

        action.setCallback(this, function(response) {
            var state = response.getState();
            if (state === "SUCCESS") {

                var campItemList = component.get("v.items");
                campItemList.push(response.getReturnValue());


                component.set("v.items", campItemList);
                component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                                           'Name': '',
                                           'Quantity__c': 1,
                                           'Price__c': 0,
                                           'Packed__c': false});           
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
        // Send action off to be executed
        $A.enqueueAction(action);  
    }

CampingListForm cmp

<aura:component >
<aura:attribute name="newItem" type="Camping_Item__c" default="{'sobjectType':'Camping_Item__c','Price__c':'0','Quantity__c':'0','Packed__c':'False'}"/>    
<aura:registerEvent name="updateCampingItem" type="c:addItemEvent"/>

<form class="slds-form--stacked" label = 'Camping List'>        
    <lightning:input aura:id="campingItemForm" name="Name" required="true" label="Name" value="{!v.newItem.Name}"/>
    <br/>
    <lightning:input aura:id="campingItemForm" type="number" name="Quantity" required="true" min="1" default="1" label="Quantity - Requires a minimum value of 1" value="{!v.newItem.Quantity__c}" messageWhenRangeUnderflow="Enter an amount that's at least 1" />
    <br/>
    <lightning:input aura:id="campingItemForm" id="Price" formatter="currency" name="Price" required="true" label="Price" value="{!v.newItem.Price__c}"/>
    <br/>
    <lightning:input aura:id="campingItemForm" id = "Packed" type="checkbox" name="Packed" label="Packed" checked="{!v.newItem.Packed__c}" />
    <br/>

    <lightning:button label = "Add Item" onclick = '{!c.clickCreateItem}'/>

</form>
</aura:component>

CampingListForm js controller

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

    var validExpense = component.find('campingItemForm').reduce(function (validSoFar, inputCmp) {
        // Displays error messages for invalid fields
        inputCmp.showHelpMessageIfInvalid();
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true);
    // If we pass error checking, do some real work
    if(validExpense){
        var campItem = component.get("v.newItem");
        helper.createItem(component, campItem);            
    }
}
})

CampingListForm helper

createItem: function(component, cil) {
    var createEvent = component.getEvent("updateCampingItem");
    createEvent.setParams({ "campingitem": cil });
    console.log('About to fire');
    createEvent.fire();
}

addItemEvent.evt

<aura:event type="COMPONENT">
<aura:attribute name="campingitem" type="Camping_Item__c"/>
</aura:event>

Answer 1

I think event is getting fired you are not able to handle it because aura handler is not having having same name as registered Event.

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

change it to

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

Name of component event in both registerevent and handler should be same.