Lightning Components Basics
Connect Components with Events
I'm facing with the below issue.

The campingList component appears to be using UI Components instead of Base Lightning Components in the form. You should be using only Base Lightning Components in CampingList : Connect Components with Events

Below is my CampingList Component Codes.

campingList.cmp
-------------------------

<aura:component controller="CampingListController" >
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
    <aura:handler name="init" action="{!c.doInit}" value="{!this}" />  
    <aura:handler name="addItem" event="c:addItemEvent" action="{!c.handleAddItem}"/>   
    
    
    <!-- Page Header -->
    <div class="slds-page-header" role="banner" >
        <div class="slds-grid">
            <div class="slds-col" >
                <h1 class="slds-text-heading--medium">Camping List</h1>
            </div>
        </div>
    </div>  
    <!--/ Page Header -->
    
    <!-- New Camping Form -->
        <c:campingListForm />
    <!--/ New Camping Form -->
    
    <!-- Camping List Items -->      
    <aura:iteration items="{!v.items}" var="itm">
          <c:campingListItem item="{!itm}"/><br/>
    </aura:iteration>
    <!--/ Camping List Items -->   
    
</aura:component>

CampingListController.js
-------------------------------------

({
        
    //-- Load Camping list Items.
    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());
                console.log("doInit: "+response.getReturnValue());
            }
        });
        
        //-- Send action off to be execute.
        $A.enqueueAction(action);
    },
    
     //-- Handle Create Expense Actions..
    handleAddItem: function(component, event, helper)
    {
        console.log("\nEntry into CampingListController.js -> handleAddItem()");        
        
        var item = event.getParam("item");
        console.log("\nCampingListController.js -> handleAddItem() item: "+ JSON.stringify(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");
               console.log("Campaigns(items..) before  create: "+JSON.stringify(items));
               items.push(response.getReturnValue());
               console.log("Campaigns(items..) after  create: "+JSON.stringify(items));
               component.set("v.items",items);
            }
        });
        $A.enqueueAction(action);
    }

 
    
})

campingListForm.cmp
---------------------------------

<aura:component controller="CampingListController" >
    
    <aura:attribute name="newItem"  type="Camping_Item__c" default="{ 'sobjectType': 'Camping_Item__c',
                                                                      'Name':'',
                                                                      'Quantity__c': 0,
                                                                      'Price__c': 0,
                                                                      'Packed__c': false}"  />  
    
    <aura:registerEvent name="addItem" type="c:addItemEvent"/>
    
    
    <!-- New Camping Form-->  
    <div class="slds-col slds-col--padded slds-p-top--large" >  
           <!-- Boxed Area-->
        <fieldset class="slds-box slds-theme--default slds-container--small">
            
            <legend id="newexpenseform" class="slds-text-heading--small" >
                Add Camping List
            </legend>
            
            <!-- Create New Expense Form -->
            <form class="slds-form--stacked">
                <!-- Name -->
                <div class="slds-form-element slds-is-required" >
                    <div class="slds-form-element__control" >
                        <ui:inputText aura:id="name"  label="Camping Name" class="slds-input"
                                      labelClass="slds-form-element__label" value="{!v.newItem.Name}" required="true" />
                    </div>
                </div>
                
                
                <!-- Quantity -->
                <div class="slds-form-element__label" >
                    <div class="slds-form-element__control" >
                        <ui:inputText aura:id="quantity" label="Quantity" class="slds-input"
                                      labelClass="slds-form-element__label" value="{!v.newItem.Quantity__c}" />
                    
                    </div>                
                </div>
                
                <!-- Price -->
                <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>
                
                <!-- Packed -->
                <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>
                
                <!-- Button Create Expense -->
                <div class="slds-form-element">
                    <ui:button label="Create Campaign" class="slds-button slds-button--brand" press="{!c.clickCreateItem}"  />
                </div>
                
            </form>            
            <!--/ Create New Expense Form -->
        </fieldset>
          <!--/ Boxed Area-->        
    </div>
    <!--/ New Camping Form-->  
    
</aura:component>

campingListFormController.js
------------------------------------------

({
    clickCreateItem : function(component, event, helper)
    {
        //-- Simplistic error checking.
        console.log("\nIn CampingListFormController.js -> submitForm()");
        var validCampign = true;
        
        //-- Name must not be blank.
        var nameField     = component.find("name");
        var campaignname = nameField.get("v.value");
        if($A.util.isEmpty(campaignname))
        {
             validCampign = false;
            nameField.set("v.errors",[{message: "Camping name can't be blank."}]);     
        }
        else
        {
            nameField.set("v.errors",null);
        }

        //-- Quantity must not be blank.
        var qtyField = component.find("quantity");
        var quantity = qtyField.get("v.value");
        if($A.util.isEmpty(quantity))
        {
            validCampign = false;
            qtyField.set("v.errors",[{message: "Quantity can't be blank."}]);
        }
        else
        {
            qtyField.set("v.errors",null);            
        }
        
        //-- Price must not be blank
        var priceField = component.find("price");
        var price       = priceField.get("v.value");
        if($A.util.isEmpty(price))
        {
            validCampign = 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(validCampign)
        {
            //-- Create the new expense.
            var newCampaign = component.get("v.newItem");
            console.log("In CampingListFormController.js -> submitForm()\n The Item: " + JSON.stringify(newCampaign));
            helper.createItem(component, newCampaign);
        }               
         
        
        
    }
    
})

campingListFormHelper.js
--------------------------------------

({
    createItem : function(component,item)
    {    
        console.log("\nEntry into CampingListFormHelper.js -> createItem()");
        console.log("In CampingListFormHelper.js -> createItem() the item is: "+JSON.stringify(item));
        var createEvent = component.getEvent("addItem");        
        createEvent.setParams({ "item": item });
        createEvent.fire();        
        component.set("v.newItem",{'sobjectType':'Camping_Item__c','Name': '','Quantity__c': 0,'Price__c': 0,'Packed__c': false});
    }
})

CampingListController.apxc
----------------------------------------

public with sharing class CampingListController
{
    @AuraEnabled
    public static List<Camping_Item__c> getItems()
    {
        String[] fieldsToCheck = new String[]{'Id','Name','Packed__c','Price__c','Quantity__c'};
        Map<String,Schema.SObjectField> fieldDescribeTokens = Schema.SObjectType.Camping_Item__c.fields.getMap();
        
        for(String field : fieldsToCheck)
        {
            if(!fieldDescribeTokens.get(field).getDescribe().isAccessible())
            {
                throw new System.NoAccessException();
                return null;
            }            
        }        
        return [SELECT Id,Name,Packed__c,Price__c,Quantity__c FROM Camping_Item__c];
    }
    
    
    @AuraEnabled  
    public static Camping_Item__c saveItem(Camping_Item__c item)
    {    
        System.debug('Campaign List Item from Apex: '+item);
        upsert item;
        System.debug('Campaign List Item from Apex Id: '+item.Id);
        return item;
    }
        
}

addItemEvent.evt
-------------------------

<aura:event type="COMPONENT">
    <aura:attribute name="item" type="Camping_Item__c"/>
</aura:event>

Please suggest me where im missing.

Thanks.
Ravichand.






 

Im getting above error. My trial head challenge is
Create a Packing List Item Component
Create a Lightning Component to display a single item for your packing list.
Create a component called campingListItem.
Add an attribute named item of type Camping_Item__c that is required.
Display the Name, Price, Quantity and Packed status using the appropriate output fields.

the Compoenet i created and coded like below.
<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true" />

    <p>Name:      <ui:outputText       value="{!v.item.Name__c}"/> </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>
    
</aura:component>