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' >

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

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


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");
        "cil": cil

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

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

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

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}"/>
    <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" />
    <lightning:input aura:id="campingItemForm" id="Price" formatter="currency" name="Price" required="true" label="Price" value="{!v.newItem.Price__c}"/>
    <lightning:input aura:id="campingItemForm" id = "Packed" type="checkbox" name="Packed" label="Packed" checked="{!v.newItem.Packed__c}" />

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


CampingListForm js controller

clickCreateItem: function(component, event, helper) {

    var validExpense = component.find('campingItemForm').reduce(function (validSoFar, inputCmp) {
        // Displays error messages for invalid fields
        return validSoFar && inputCmp.get('v.validity').valid;
    }, true);
    // If we pass error checking, do some real work
        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');


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

1 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"

change it to

<aura:handler name="updateCampingItem" event="c:addItemEvent"

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

  • This is good to know! I might have missed this in the lesson they provided. Works great now. Thanks for the help.
    – Rory
    Sep 24, 2019 at 17:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .