Refactor the input form for camping list items into its own component and communicate with messages.
Replace the HTML form in the campingList component with a new campingListFormcomponent that calls the submitForm controller action when clicked.
The campingList component handles a c:addItemEvent event with the actionhandleAddItem in the JavaScript controller. The handleAdditem method saves the record to the database and adds the record to the items value provider.
The addItemEvent event is of type component and has a Camping_Item__c type attribute named item.
The campingListForm registers an addItem event of type c:addItemEvent.
The campingListFormController JavaScript controller calls the helper's createItem method if the form is valid.
The campingListFormHelper JavaScript helper creates an addItem event with the item to be added and then fires the event. It then resets the newItem value provider with a blank sObjectType of type Camping_Item__c.


Need the code for the above challenge 

Hi All,

with below code I have completed the challenge thanks!!...When I tried to add this componet to Application and tried to check the UI part..I got below error, Can some one please let me know what the mistake is???

Something has gone wrong. [NoErrorObjectAvailable] Aura.loadComponent(): Failed to initialize application. An internal server error has occurred Error ID: 991118890-131685 (-1741317831) . Please try again.

APP:

<aura:application >
    <c:campingListItem />
</aura:application>


COMPONENT:

<aura:component >

    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <ui:outputText value="{!v.item}"/>
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    <ui:outputCurrency value="{!v.item.Price__c}"/>
    <ui:outputNumber value="{!v.item.Quantity__c}"/>
    
    <ui:button label="packed!" press="{!c.packItem}" > 
    </ui:button>
</aura:component>


CONTROLLER:
({
    packItem: function(component, event, helper) {
        var a = component.get("v.item",true);
       
        a.Packed__c = true;
        component.set("v.item",a);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    }
})


Thanks