[SalesForce] Data input forms on lightning component basics Trail

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

Best Answer

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

Related Topic