function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
JeffreyStevensJeffreyStevens 

Trailhead Challenge Lightning Components Basics, Connect Components with Event

I've read through several posts on the Connect Components with Events challenge, and I'm still not seeing what's wrong with my campingListController.  I'm getting the Challenge Not yet complete message. "The campingList JavaScript controller isn't setting the 'item' as a parameter or saving the record correctly"

Can anybody tell me where I'm wrong?

campingList - component
<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
   
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
    
    <div class="slds-page-header" role="banner">
      <div class="slds-grid">
        <div class="slds-col">
          <p class="slds-text-heading--label">Camping Items</p>
          <h1 class="slds-text-heading--medium">My Camping Items</h1>
        </div>
      </div>
    </div>

      
  	<div aria-labelledby="newitemform">
      <fieldset class="slds-box slds-theme--default slds-container--small">   
        <c:campingListForm />
      </fieldset>
	</div>
    
    
     <aura:attribute name="items" type="Camping_Item__c[]"/>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping List Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="campItem">
                    <c:campingListItem item="{!campItem}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

campingList - Controller
({

    //
    //      Load Camping Items at startup
    //
    doInit: function(component, event, helper) {
        // Create the action
        var action = component.get("c.getItems");

        // Add callback behavior for when response is received
        action.setCallback(this, function(response) {
            var state = response.getState();
            if(component.isValid() && state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            } else {
                console.log("Failed with state: " + state);
            }
        });

        // Send action to be executed
        $A.enqueueAction(action);
    },

    handleAddItem: function(component, event, helper) {
    	var item = event.getParam("item");
      	var action = component.get("c.saveItem");
      	action.setParms({"item" : item});
        action.setCallback(this,function(response){
           	var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                var items = component.get("v.items");
                items.push(response.getReturnValue());
                component.set("v.items", items);
            }
        });
        $A.enqueueAction(action);
    },

	
})

Nothing in the helper.

Thanks!
 
Best Answer chosen by JeffreyStevens
Lokesh KumarLokesh Kumar
HI Jefferey,

I have posted the working solution in the below discussion please try and get it done.

https://developer.salesforce.com/forums/?id=9060G000000XhdHQAS

Thanks !

Happy to help you !!

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Jefferey,

May I suggest you please check with below link from the forums community with similar issue and suggested workaround. Hope this helps.

Mark it as solved if it's resolved.

Regards,
Nagendra.
Lokesh KumarLokesh Kumar
HI Jefferey,

I have posted the working solution in the below discussion please try and get it done.

https://developer.salesforce.com/forums/?id=9060G000000XhdHQAS

Thanks !

Happy to help you !!
This was selected as the best answer
JeffreyStevensJeffreyStevens
Thanks for the links - working through them now.  However - on Lokesh's example - on line # 28 of the campingListController - how can it use the "newItem", when line 25 is commented out?  Am I missing something there?
Lokesh KumarLokesh Kumar
HI Jeffrey,

As "newItem" is already been declared in list controller Don't worry about this line it's working for me and I passed the challenge. 

Did you tried it !

Thanks !1
JeffreyStevensJeffreyStevens
Yes - finally passed it with this...
 
<aura:component controller="CampingListController">
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>
    
    <div class="slds-page-header" role="banner">

      <div class="slds-grid">

        <div class="slds-col">

          <p class="slds-text-heading--label">Camping Items</p>

          <h1 class="slds-text-heading--medium">My Camping Items</h1>

        </div>

      </div>

    </div>

      
  <div aria-labelledby="newitemform">

      <fieldset class="slds-box slds-theme--default slds-container--small">
    
        <c:campingListForm />
    
      </fieldset>

	</div>
    
    
     <aura:attribute name="items" type="Camping_Item__c[]"/>

    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Camping List Items</h3>
        </header>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="campItem">
                    <c:campingListItem item="{!campItem}"/>
                </aura:iteration>
            </div>
        </section>
    </div>

</aura:component>

And campingListController...
({
    
    doInit: function(component, event, helper) {
    
        var action = component.get("c.getItems");
    
        action.setCallback(this, function(response) {
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });
    
        $A.enqueueAction(action);
    },    
    
    handleAddItem: function(component, event, helper) {
        var item = event.getParam("item");
                
        var action = component.get("c.saveItem");
        action.setParams({
            "item": item
        });
        
        action.setCallback(this, function(response){
            var state = response.getState();
            if (component.isValid() && state === "SUCCESS") {        
                var items = component.get("v.items");
                items.push(item);
                component.set("v.items",items);
            }
        });
        $A.enqueueAction(action);
    }
    
})