I have passed the challenge but the code has a major bug in it that I cannot locate. When I click the "Create Item" button the first time it will save the Camping Item information just fine. However, when I click the button a scond time, the same information will be added to the list of items that was added upon the first click. It does not seem to ever allow to overwrite the values after the button is initially clicked.

Here is my code -- any and all ideas are greatly appreaciated!

campingList Component:
<pre>

<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,
                                                                   'Packed__c':false }" />
<!--    <ol>
            <li>Bug Spray</li>
            <li>Bear Repellant</li>
            <li>Goat Food</li>
        </ol> 
-->
    
    <!-- New Expense Form -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        
        <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">
                    
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="itemname" label="Item Name"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Name}"
                                          required="true" />
                        </div>
                    </div>
                    
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="quantity" label="Quantity"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.newItem.Quantity__c}"
                                            required="true"/>
                        </div>
                    </div>
                    
                     <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="price" label="Price"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.newItem.Price__c}"
                                            required="true"/>
                        </div>
                    </div>
                    
                    <div class="slds-form-element">
                        <ui:inputCheckbox aura:id="packed" label="Packed?"
                                          class="slds-checkbox"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Packed__c}"/>
                    </div>
                    
                    <div class="slds-form-element">
                        <ui:button label="Create Item"
                                   class="slds-button slds-button--brand"
                                   press="{!c.clickCreateItem}"/>
                    </div>
                    
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->    
    </div>
    
    
    <!-- iterate? -->
    
    
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Items</h3>
        </header>
        
        <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>

    
</aura:component>
</pre>

campingLIstController
<pre>
({
    
    clickCreateItem : function(component, event, helper) {
        // Simplistic error checking
        var validItem = true;
        
        // Name must not be blank
        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        console.log("nameField value: " + itemname);
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        console.log("quantityField value: " + quantity);
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        
        // Price must not be blank
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        console.log("priceField value: " + price);
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        // If we pass error checking, do some real work
        if (validItem){
            // Create the new expense
            console.log("Pre-Passing following to helper: " + JSON.stringify(component.get("v.newItem")));
            var newItem = component.get("v.newItem");
            console.log("Passing following to helper: " + JSON.stringify(newItem));
            
            //helper.createItem(component, newItem);
            var theItems = component.get("v.items");
            
            // Copy the expense to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            newItem = JSON.parse(JSON.stringify(newItem));
            
            console.log("before push: " + JSON.stringify(theItems));
            theItems.push(newItem);
            console.log("after push: " + JSON.stringify(theItems));
            component.set("v.items", theItems);
            
            // Reset the newItem
            //component.set("v.newItem","{'sObjectType':'Camping_Item__c','Name':'','Quantity__c':0,'Price__c':0,'Packed__c':false }");
           // component.set("v.newItem.Name","New");
        }        
        
    }
    
})

</pre>

campingLIstHelper:
***blank***

In the Bulk Apex Triggers Trailhead piece we are told to use WhatId to set the related field of a new task. However, when I look at the actual fields of the Task object the field name is actually What. When I try to use What I get an error. How would I have known to use the WhatId name instead and why is this in general?

I have passed the challenge but the code has a major bug in it that I cannot locate. When I click the "Create Item" button the first time it will save the Camping Item information just fine. However, when I click the button a scond time, the same information will be added to the list of items that was added upon the first click. It does not seem to ever allow to overwrite the values after the button is initially clicked.

Here is my code -- any and all ideas are greatly appreaciated!

campingList Component:
<pre>

<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,
                                                                   'Packed__c':false }" />
<!--    <ol>
            <li>Bug Spray</li>
            <li>Bear Repellant</li>
            <li>Goat Food</li>
        </ol> 
-->
    
    <!-- New Expense Form -->
    <div class="slds-col slds-col--padded slds-p-top--large">
        
        <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">
                    
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputText aura:id="itemname" label="Item Name"
                                          class="slds-input"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Name}"
                                          required="true" />
                        </div>
                    </div>
                    
                    <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="quantity" label="Quantity"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.newItem.Quantity__c}"
                                            required="true"/>
                        </div>
                    </div>
                    
                     <div class="slds-form-element slds-is-required">
                        <div class="slds-form-element__control">
                            <ui:inputNumber aura:id="price" label="Price"
                                            class="slds-input"
                                            labelClass="slds-form-element__label"
                                            value="{!v.newItem.Price__c}"
                                            required="true"/>
                        </div>
                    </div>
                    
                    <div class="slds-form-element">
                        <ui:inputCheckbox aura:id="packed" label="Packed?"
                                          class="slds-checkbox"
                                          labelClass="slds-form-element__label"
                                          value="{!v.newItem.Packed__c}"/>
                    </div>
                    
                    <div class="slds-form-element">
                        <ui:button label="Create Item"
                                   class="slds-button slds-button--brand"
                                   press="{!c.clickCreateItem}"/>
                    </div>
                    
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
                
            </fieldset>
            <!-- / BOXED AREA -->
            
        </div>
        <!-- / CREATE NEW EXPENSE -->    
    </div>
    
    
    <!-- iterate? -->
    
    
    <div class="slds-card slds-p-top--medium">
        <header class="slds-card__header">
            <h3 class="slds-text-heading--small">Items</h3>
        </header>
        
        <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>

    
</aura:component>
</pre>

campingLIstController
<pre>
({
    
    clickCreateItem : function(component, event, helper) {
        // Simplistic error checking
        var validItem = true;
        
        // Name must not be blank
        var nameField = component.find("itemname");
        var itemname = nameField.get("v.value");
        console.log("nameField value: " + itemname);
        if ($A.util.isEmpty(itemname)){
            validItem = false;
            nameField.set("v.errors", [{message:"Item name can't be blank."}]);
        }
        else {
            nameField.set("v.errors", null);
        }
        
        // Quantity must not be blank
        var quantityField = component.find("quantity");
        var quantity = quantityField.get("v.value");
        console.log("quantityField value: " + quantity);
        if ($A.util.isEmpty(quantity)){
            validItem = false;
            quantityField.set("v.errors", [{message:"Quantity can't be blank."}]);
        }
        else {
            quantityField.set("v.errors", null);
        }
        
        // Price must not be blank
        var priceField = component.find("price");
        var price = priceField.get("v.value");
        console.log("priceField value: " + price);
        if ($A.util.isEmpty(price)){
            validItem = false;
            priceField.set("v.errors", [{message:"Price can't be blank."}]);
        }
        else {
            priceField.set("v.errors", null);
        }
        
        // If we pass error checking, do some real work
        if (validItem){
            // Create the new expense
            console.log("Pre-Passing following to helper: " + JSON.stringify(component.get("v.newItem")));
            var newItem = component.get("v.newItem");
            console.log("Passing following to helper: " + JSON.stringify(newItem));
            
            //helper.createItem(component, newItem);
            var theItems = component.get("v.items");
            
            // Copy the expense to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            newItem = JSON.parse(JSON.stringify(newItem));
            
            console.log("before push: " + JSON.stringify(theItems));
            theItems.push(newItem);
            console.log("after push: " + JSON.stringify(theItems));
            component.set("v.items", theItems);
            
            // Reset the newItem
            //component.set("v.newItem","{'sObjectType':'Camping_Item__c','Name':'','Quantity__c':0,'Price__c':0,'Packed__c':false }");
           // component.set("v.newItem.Name","New");
        }        
        
    }
    
})

</pre>

campingLIstHelper:
***blank***

Problem Statement:

Create a form to enter new items and display the list of items entered. To make our camping list look more appealing, change the campingHeader component to use the SLDS. Similar to the unit, style the Camping List H1 inside the slds-page-header. Modify the campingList component to contain an input form and an iteration of campingListItem components for displaying the items entered.

• The component requires an attribute named items with the type of an array of camping item custom objects.
• The component requires an attribute named newItem of type Camping_Item__c with default quantity and price values of 0.
• The component displays the Name, Quantity, Price, and Packed form fields with the appropriate input component types and values from the newItem attribute.
• The JavaScript controller checks to ensure that the Name, Quantity and Price values submitted are not null.
• If the form is valid, the JavaScript controller pushes the newItem onto the array of existing items, triggers the notification that the items value provider has changed, and resets the newItem value provider with a blank sObjectType of Camping_Item__c.

My Code:

CampingList.cmp
 

<aura:component >
	<ol>
        <li>Bug Spray</li>
        <li>Bear Repellant</li>
        <li>Goat Food</li>
    </ol>
 <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': 0,
                    'Packed__c': false }"/>    
    <div style = "slds">
    <div class="slds-col slds-col--padded slds-p-top--large">
		<div aria-labelledby="newform">
			<fieldset class="slds-box slds-theme--default slds-container--small">
				<legend id="newform" class="slds-text-heading--small slds-p-vertical--medium">New Form</legend>
				<form class="slds-form--stacked">
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputText aura:id="formname" label="Name" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true"/>
						</div>
					</div>
					<div class="slds-form-element slds-is-required">
						<div class="slds-form-element__control">
							<ui:inputCurrency aura:id="formprice" label="Price" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Price__c}" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<div class="slds-form-element__control">
							<ui:inputNumber aura:id="formquantity" label="Quantity" class="slds-input" labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}" required="true" placeholder="0"/>
						</div>
					</div>
					<div class="slds-form-element">
						<ui:inputCheckbox aura:id="formpacked" label="Packed?" class="slds-checkbox" labelClass="slds-form-element__label" value="{!v.newItem.Packed__c}"/>
					</div>
					<div class="slds-form-element">
						<ui:button label="Create Form" class="slds-button slds-button--brand" press="{!c.clickCreateFormData}"/>
					</div>
				</form>
			</fieldset>
		</div>
    </div>

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

CampingListController.js:
 

({
    clickCreateFormData: function(component, event, helper) {

        var validitem = true;
        
        var nameField = component.find("formname");
        var expname = nameField.get("v.value");
		if ($A.util.isEmpty(expname)){
            validitem = false;
            nameField.set("v.errors", [{message:"Expense name can't be blank."}]);
        }
        else {
            nameField.set("v.errors",null);
        }
        
        var priceField = component.find("formprice");
        var expprice = nameField.get("v.value");
            if ($A.util.isEmpty(expprice)){
            validitem = false;
            priceField.set("v.errors", [{message:"Expense price can't be blank."}]);
        }
        else{
            priceField.set("v.errors",null);
        }
        
        var quantityField = component.find("formquantity");
        var expquantity = nameField.get("v.value");
        if ($A.util.isEmpty(expquantity)){
            validitem = false;
            quantityField.set("v.errors", [{message:"Expense quantity can't be blank."}]);
        }
        else{
            quantityField.set("v.errors",null);
        } 
        
      /*  if(validExpense){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
            helper.createExpense(component, newItem);
        } */
         if(validitem){
            var newItem = component.get("v.newItem");
            console.log("Create item: " + JSON.stringify(newItem));
        	var theItem = component.get("v.items");
            var newItem = JSON.parse(JSON.stringify(newItem));
            theItem.push(newItem);
            component.set("v.newItem",newItem);
        }
        component.set("v.newItem",{'sobjectType': 'Camping_Item__c',
                    'Name': '',
					'Price__c': 0,                                   
                    'Quantity__c': 0,
                    'Packed__c': false });
    }
})

CampingListItem.cmp:
 

<aura:component implements="force:appHostable">
   <aura:attribute name="item" type="Camping_Item__c"/>
     <p>The Item is: 
         <ui:outputText value="{!v.item}" />
    </p> 
    <p>Name:
        <ui:outputText value="{!v.item.Name}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>Packed?:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    
  <!--  <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p> -->
</aura:component>

Could anyone help pass and run the challenge.

Thanks.

In the Bulk Apex Triggers Trailhead piece we are told to use WhatId to set the related field of a new task. However, when I look at the actual fields of the Task object the field name is actually What. When I try to use What I get an error. How would I have known to use the WhatId name instead and why is this in general?