1

I'm stuck... I have been trying to get to the bottom of this for a while now and assuming that trailhead is just super finicky about checking this one.. My component is working, but i'm getting this error when checking the challenge:

The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components.

Hoping someone can rubber duck this for me better than I am at the moment..

here's <c:campingList />

<aura:component access="global" implements="flexipage:availableForAllPageTypes">

<aura:attribute name="items" type="Camping_Item__c[]" />
<aura:attribute name="newItem" type="Camping_Item__c" default="{
                                                               'sObjectType': 'Camping_Item__c',
                                                               'Name' : '',
                                                               'Price__c': '0',
                                                               'Quantity__c': '',
                                                               'Packed__c' : false 
                                                               }" />

<lightning:layout horizontalAlign="spread" multipleRows="false" >
    <lightning:layoutItem padding="around-small" flexibility="grow" size="12">
        <!-- CREATE NEW ITEM -->
        <div aria-labelledby="newItemForm">

            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default">

                <legend id="newItemForm" class="slds-text-heading--small 
                                                slds-p-vertical--medium">
                    Add Camping Item
                </legend>

                <!-- CREATE NEW ITEM FORM -->
                <form class="slds-form--stacked">          
                    <lightning:input aura:id="itemForm" label="Item Name"
                                     name="itemName"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="itemForm" label="Price"
                                     name="itemPrice"
                                     formatter="currency"
                                     value="{!v.newItem.Price__c}"/>
                    <lightning:input aura:id="itemForm" label="Quantity"
                                     name="itemQuantity"
                                     value="{!v.newItem.Quantity__c}"
                                     min="1"
                                     step="1"
                                     messageWhenRangeUnderflow="Enter a quantity that's at least 1."/>
                    <lightning:input type="toggle" aura:id="itemForm" label="Packed"
                                     name="itemPacked"
                                     value="{!v.newItem.Packed__c}"/>
                    <lightning:button label="Create Item" 
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- / CREATE NEW ITEM FORM -->

            </fieldset>
            <!-- / BOXED AREA -->

        </div>
    </lightning:layoutItem>
</lightning:layout>
<!--iterate over camping List Items -->

<lightning:card>
    <aura:set attribute="title">
        Camping Items
    </aura:set>
    <p class="slds-p-horizontal--small">
        <aura:iteration var="item" items="{!v.items}" >
            <c:campingListItem campingItem="{!item}"/>
        </aura:iteration>
    </p>
</lightning:card> 

Now this is working exactly as expected and new items are being added to the array of items, yet the error persists. I have googled many, many answers to this but nothing seems to come to mind.. crowd sourcing additional eyes here..

  • At the first glance, I can see every input element has the same "aura:id="itemForm". Please change the id attribute accordingly. It must be different for each and every input element of your component. – Prolay Chaudhury Jan 26 '18 at 7:35
2

Okay, so the answer to this comes down to that classic Trailhead thing of being exactly correct in the syntax of what you're being asked to do.

I was iterating over an array as requested, but I had:

<lightning:card>
<aura:set attribute="title">
    Camping Items
</aura:set>
<p class="slds-p-horizontal--small">
    <aura:iteration var="item" items="{!v.items}" >
        <c:campingListItem campingItem="{!item}"/>
    </aura:iteration>
</p>

Note the attribute name on the campingListItem component of 'campingItem' - I named this differently to ensure not everything was just named 'item' - kinda made more sense to me to do it that way. However, Trailhead expects that it will find an attribute named "item", so the correct (passing) code is:

<lightning:card>
<aura:set attribute="title">
    Camping Items
</aura:set>
<p class="slds-p-horizontal--small">
    <aura:iteration var="item" items="{!v.items}" >
        <c:campingListItem item="{!item}"/>
    </aura:iteration>
</p>

Naturally, everything in the campingListItem component had to be changed to reflect the new attribute name also...

| improve this answer | |
  • I made an account here just to say you're an absolute life-saver. This was driving me crazy. – Sinjai May 29 '19 at 20:23
  • 1
    thanks @Sinjai ;) glad i wasn't the only one that went nuts on this.. haha – adam.sellers Jun 7 '19 at 12:18

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.