+ Start a Discussion
Doug VanderbiltDoug Vanderbilt 

I am attempting to complete the "Create a Form to Enter New Items" challenge but keep getting error message.

https://trailhead.salesforce.com/content/learn/modules/lex_dev_lc_basics/lex_dev_lc_basics_forms

The message is "Challenge not yet complete in My Trailhead Playground 1. The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components.".

I have reviewed all the answers related to this issue but still can't figure it out.

 
Best Answer chosen by Doug Vanderbilt
Doug VanderbiltDoug Vanderbilt
I was able to complete each of the challenges related to the issues above. I ended up rewriting some of the code to comply with the errors I was receiving from the challenge.

All Answers

Doug VanderbiltDoug Vanderbilt
By the way, it works perfectly on the front-end when I add items manually.

The challenge said not to use the helper, but add the refresh code to the controller. That was done.

Here is the code:
 
CampingApp.app
<code>
<aura:application extends="force:slds">
    <c:campingHeader/>
    <c:campingList/>
</aura:application>
</code>
 
campingHeader.cmp
<code>
<aura:component >
    
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="Camping List"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping Items</h1>
                <h2 class="slds-text-heading--medium">My Camping Items</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER -->
    </aura:component>
</code>
 
campingList.cmp
<code>
<aura:component>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c"
         default="{ 'sobjectType': 'Camping_Item__c',
                        'Name': '',
                        'Quantity__c': 0,
                        'Price__c': 0.00,
                        'Packed__c': false }"/>
    
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
        <!-- CREATE NEW EXPENSE -->
        <div aria-labelledby="newitemform">
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
            <legend id="newitemform" class="slds-text-heading--small 
              slds-p-vertical--medium">
              Add Item
            </legend>
      
            <!-- CREATE NEW EXPENSE FORM -->
            <form class="slds-form--stacked">          
                <lightning:input aura:id="itemform" label="Item Name"
                                 name="name"
                                 value="{!v.newItem.Name}"
                                 required="true"/> 
                <lightning:input type="number" aura:id="itemform" label="Quantity"
                                 name="quantity"
                                 min="1"
                                 formatter="number"
                                 value="{!v.newItem.Quantity__c}"
                                 messageWhenRangeUnderflow="Enter a quantity greater than 0"/>
                <lightning:input type="number" aura:id="itemform" label="Price"
                                 name="price"
                                 value="{!v.newItem.Price__c}"/>
                <lightning:input type="checkbox" aura:id="itemform" label="Packed?"  
                                 name="packed"
                                 checked="{!v.newItem.Packed__c}"/>
                <lightning:button label="Add Item" 
                                  class="slds-m-top--medium"
                                  variant="brand"
                                  onclick="{!c.clickCreateItem}"/>
            </form>
            <!-- / CREATE NEW ITEM FORM -->
      
          </fieldset>
          <!-- / BOXED AREA -->
        </div>
        <!-- / CREATE NEW ITEM -->            
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW ITEM FORM -->
    
    <c:campingListItem items="{!v.items}"/>
    
</aura:component>
</code>
 
campingListController.js
<code>
({
    clickCreateItem: function(component, event, helper) {
        var validItem = component.find('itemform').reduce(function (validSoFar, inputItem) {
            // Displays error messages for invalid fields
            inputItem.showHelpMessageIfInvalid();
            return validSoFar && inputItem.get('v.validity').valid;
        }, true);
        // If we pass error checking, do some real work
        if(validItem){
            // Create the new item
            var newItem = component.get("v.newItem");
            console.log("Add item: " + JSON.stringify(newItem));
            //helper.createItem(component, newItem);
        }
        
        var theItems = component.get("v.items");
        theItems.push(newItem);
        component.set("v.items", theItems);        
        
    }
    
 })
</code>

campingListItem.cmp
<code>
<aura:component>
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <lightning:card title="Items">
        <p class="slds-p-horizontal--small">
            <aura:iteration items="{!v.items}" var="item">
                <c:campingListItems item="{!item}"/>
            </aura:iteration>
        </p>
    </lightning:card>
</aura:component>
</code>
 
campaingListItems.cmp
​​​​​​​<code>
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c"/>

    <lightning:card title="{!v.item.Name}" iconName="standard:goal"
                    class="{!v.item.Packed__c ?
                           'slds-theme--success' : ''}">
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
        </p>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Packed?"
                             name="packed"
                             class="slds-p-around--small"
                             checked="{!v.item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickPacked}"/>
        </p>
    </lightning:card>
</aura:component>
</code>

Thanks in advance for taking a look!

Doug
Doug VanderbiltDoug Vanderbilt
Sorry, one more quick comment, please disregard the "<code></code>", I accidently included it in this post.
Deepali KulshresthaDeepali Kulshrestha
Hi Doug,

If you are facing problem related to challenge "Create  a Form to Enter New Items".

Please refer to these links it may be helpful to you:
https://techevangel.com/2018/04/15/trailhead-challenge-create-a-form-to-enter-new-items/
https://github.com/Mulodo-Salesforce-Training/trailhead-salesforce-challenge/blob/master/LightningComponentForm.md
https://developer.salesforce.com/forums/?id=906F0000000kDD0IAM    

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha
Doug VanderbiltDoug Vanderbilt
Thank you for replying. I did find those posts previously, but they are of no help at this point. My component is working properly saving data back to salesforce, etc., and seems to be configured correctly. I've re-written it a numbe of different ways but I continue to get the same error when submitting the challenge: "The campingList component isn't iterating the array of 'items' and creating 'campingListItem' components." Not sure what to do at this point.
Doug VanderbiltDoug Vanderbilt
I was able to complete each of the challenges related to the issues above. I ended up rewriting some of the code to comply with the errors I was receiving from the challenge.
This was selected as the best answer
VenkataRamanjaneyulu KattamuruVenkataRamanjaneyulu Kattamuru
<!-- campingListHeader  -->
<aura:component >
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem >
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">My Camping</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

<!-- campingListItem -->
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c"/>

    <lightning:card title="{!v.item.Name}" iconName="standard:goal"
                    class="{!v.item.Packed__c ?
                           'slds-theme--success' : ''}">
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
        </p>
        <p class="slds-text-heading--medium slds-p-horizontal--small">
           Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Packed?"
                             name="packed"
                             class="slds-p-around--small"
                             checked="{!v.item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.clickPacked}"/>
        </p>
    </lightning:card>
</aura:component>

<!-- campingList  -->
<aura:component >
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    <aura:attribute name="newItem" type="Camping_Item__c" default="{'Name':'',
                                                                   'Quantity__c':0,
                                                                   'Price__c':0,
                                                                   'Packed__c':false,
                                                                   'sobjectType':'Camping_Item__c'}"/>
    
    <!-- NEW Campaing FORM -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        
        
        <c:campingHeader/>
        <div aria-labelledby="newCampaingForm">
            
            <!-- BOXED AREA -->
            <fieldset class="slds-box slds-theme--default slds-container--small">
                
                <legend id="newCampaingForm" class="slds-text-heading--small
                                                    slds-p-vertical--medium">
                    Add Expense
                </legend>
                
                <!-- CREATE NEW Campaing FORM -->
                <form class="slds-form--stacked">
                    
                    <!-- For Name Field -->
                    <lightning:input aura:id="expenseform" label="Camping Name"
                                     name="expensename"
                                     value="{!v.newItem.Name}"
                                     required="true"/>
                    <!-- For Quantity Field -->
                    <lightning:input type="number" aura:id="campingform" label="Quantity"
                                     name="expenseamount"
                                     min="1"
                                     value="{!v.newItem.Quantity__c}"
                                     messageWhenRangeUnderflow="Enter minimum 1 Quantity"/>
                    <!-- For Price Field -->
                    <lightning:input aura:id="campingform" label="Price"
                                     formatter="currency"
                                     name="expenseclient"
                                     value="{!v.newItem.Price__c}"
                                     />
                    <!-- For Check Box -->
                    <lightning:input type="checkbox" aura:id="campingform" label="Packed"
                                     name="expreimbursed"
                                     checked="{!v.newItem.Packed__c}"/>
                    
                    <lightning:button label="Create Camping"
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM --></fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->
    </div>
    <!-- ITERATIING ITEM LISTS -->
    <div class="slds-card slds-p-top--medium">
        
        <c:campingHeader/>
        
        <section class="slds-card__body">
            <div id="list" class="row">
                <aura:iteration items="{!v.items}" var="item">
                    <c:campingListItem item="{!item}"/>
                </aura:iteration>
            </div>
        </section>
    </div>
    <!-- / ITERATIING ITEM LISTS -->
</aura:component>

<!-- camplingListController.js -->

({
    clickCreateItem : function(component, event, helper) {
        var validCamping = component.find('campingform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid();
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        
        if(validCamping){
            var newCampingItem = component.get("v.newItem");
            //helper.createCamping(component,newCampingItem);
            var campings = component.get("v.items");
            var item = JSON.parse(JSON.stringify(newCampingItem));
            
            campings.push(item);
            
            component.set("v.items",campings);
            component.set("v.newItem",{ 'sobjectType': 'Camping_Item__c','Name': '','Quantity__c': 0,
                                       'Price__c': 0,'Packed__c': false });
        }
    }
})
SursSurs
Hi VenkataRamaAnjaneyulu Kattamuru,
Thank you for posting the above code.It really helped me.I can't thank you enough.
krati gupta 37krati gupta 37
The campingList component doesn't have an attribute named 'items' with the type an array of Camping_Item__c.
I am facing this error.
plzz help me out this............


----------------campingApp.app--------------
<aura:application extends="force:slds">
    <c:campingHeader/>
    <c:campingList/>
</aura:application>


----------------------campingHeader.cmp-------------------
<code> <aura:component >         
<!-- PAGE HEADER -->     <lightning:layout class="slds-page-header slds-page-header--object-home">         <lightning:layoutItem>             <lightning:icon iconName="action:goal" alternativeText="Camping List"/>         </lightning:layoutItem>         <lightning:layoutItem padding="horizontal-small">             <div class="page-section page-header">                 <h1 class="slds-text-heading--label">Camping Items</h1>                 <h2 class="slds-text-heading--medium">My Camping Items</h2>             </div>         </lightning:layoutItem>     </lightning:layout>     <!-- / PAGE HEADER -->     </aura:component> </code>


------------campingList.cmp --------------
<code> <aura:component>     <aura:attribute name="items" type="Camping_Item__c[]"/>     <aura:attribute name="newItem" type="Camping_Item__c"          default="{ 'sobjectType': 'Camping_Item__c',                         'Name': '',                         'Quantity__c': 0,                         'Price__c': 0.00,                         'Packed__c': false }"/>          <!-- NEW EXPENSE FORM -->     <lightning:layout>         <lightning:layoutItem padding="around-small" size="6">         <!-- CREATE NEW EXPENSE -->         <div aria-labelledby="newitemform">             <!-- BOXED AREA -->             <fieldset class="slds-box slds-theme--default slds-container--small">             <legend id="newitemform" class="slds-text-heading--small                slds-p-vertical--medium">               Add Item             </legend>                    <!-- CREATE NEW EXPENSE FORM -->             <form class="slds-form--stacked">                           <lightning:input aura:id="itemform" label="Item Name"                                  name="name"                                  value="{!v.newItem.Name}"                                  required="true"/>                  <lightning:input type="number" aura:id="itemform" label="Quantity"                                  name="quantity"                                  min="1"                                  formatter="number"                                  value="{!v.newItem.Quantity__c}"                                  messageWhenRangeUnderflow="Enter a quantity greater than 0"/>                 <lightning:input type="number" aura:id="itemform" label="Price"                                  name="price"                                  value="{!v.newItem.Price__c}"/>                 <lightning:input type="checkbox" aura:id="itemform" label="Packed?"                                    name="packed"                                  checked="{!v.newItem.Packed__c}"/>                 <lightning:button label="Add Item"                                    class="slds-m-top--medium"                                   variant="brand"                                   onclick="{!c.clickCreateItem}"/>             </form>             <!-- / CREATE NEW ITEM FORM -->                  </fieldset>           <!-- / BOXED AREA -->         </div>         <!-- / CREATE NEW ITEM -->                     </lightning:layoutItem>     </lightning:layout>     <!-- / NEW ITEM FORM -->          <c:campingListItem items="{!v.items}"/>      </aura:component> </code>


-------------campingListController.js -----------------
<code> ({     clickCreateItem: function(component, event, helper) {         var validItem = component.find('itemform').reduce(function (validSoFar, inputItem) {             // Displays error messages for invalid fields             inputItem.showHelpMessageIfInvalid();             return validSoFar && inputItem.get('v.validity').valid;         }, true);         // If we pass error checking, do some real work         if(validItem){             // Create the new item             var newItem = component.get("v.newItem");             console.log("Add item: " + JSON.stringify(newItem));             //helper.createItem(component, newItem);         }                  var theItems = component.get("v.items");         theItems.push(newItem);         component.set("v.items", theItems);                      }       }) </code>



---------------campingListItem1.cmp--------------
<code> <aura:component>     <aura:attribute name="items" type="Camping_Item__c[]"/>     <lightning:card title="Items">         <p class="slds-p-horizontal--small">             <aura:iteration items="{!v.items}" var="item">                 <c:campingListItems item="{!item}"/>             </aura:iteration>         </p>     </lightning:card> </aura:component> </code>



-------------------campaingListItems.cmp-----------------
​​​​​​​<code> <aura:component>     <aura:attribute name="item" type="Camping_Item__c"/>     <lightning:card title="{!v.item.Name}" iconName="standard:goal"                     class="{!v.item.Packed__c ?                            'slds-theme--success' : ''}">         <p class="slds-text-heading--medium slds-p-horizontal--small">            Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}"/>         </p>         <p class="slds-text-heading--medium slds-p-horizontal--small">            Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>         </p>         <p>             <lightning:input type="toggle"                               label="Packed?"                              name="packed"                              class="slds-p-around--small"                              checked="{!v.item.Packed__c}"                              messageToggleActive="Yes"                              messageToggleInactive="No"                              onchange="{!c.clickPacked}"/>         </p>     </lightning:card> </aura:component> </code>