function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Atticus Fernandes 5Atticus Fernandes 5 

Lightning Trailhead : Attribute item of type Custom Object not being set

HI ,I am doing a trailhead on salesforce Lighting this is my code 

<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c"  /> <!-- required="true" type="String"  -->
    <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" /> 
    </p>

    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}" /> 
    </p>

    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}" /> 
    </p>

    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}" /> 
    </p>
    
    <p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
    </p>
</aura:component>


Now Its required of me to :
Add a button to the campingListItem component that when clicked, marks the item as packed.
1.Add a button labeled "Packed!" that calls the packItem controller function when clicked.
2.The controller action marks the item attribute as packed and disables the button.

I have done with the first point
I'm struggling with the second point.

the controller code looks something like this (which currently isnt working)

({
    packItem : function(component, event, helper) {
        var btn= event.getSource();
        var BtnMessage =btn.get("v.label");  
        component.set("v.item","Packed");          
        btn.disabled=false;
    }
})


each time I have failing the trailhead because of this error message
Challenge Not yet complete... here's what's wrong: 
The campingListItem JavaScript controller isn't setting the 'Packed' value correctly.


 
Best Answer chosen by Atticus Fernandes 5
Amit VaidyaAmit Vaidya
Hi Atticus,

Please try updating following statement in your 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,
Amit

All Answers

Chris Gary CloudPerformerChris Gary CloudPerformer
Could it be that your controller code needs to look like the following: 
({
    packItem : function(component, event, helper) {
        var btn= event.getSource();
        var BtnMessage =btn.get("v.label");  
        component.set("v.item","Packed__c");          
        btn.disabled=false;
    }
})

 
Amit VaidyaAmit Vaidya
Hi Atticus,

Please try updating following statement in your 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,
Amit
This was selected as the best answer
Susan ThomlinsonSusan Thomlinson
That worked for me.  Thank you. 
Atticus Fernandes 5Atticus Fernandes 5
Thanks Chris and Thank you Amit
Amit your solution worked like a charm! GBU
Amit VaidyaAmit Vaidya
That's cool Atticus. Thank you!
Yashita Goyal 17Yashita Goyal 17
Hi Amit,

I trying to work on the same challenge. However still running into issue as: Cannot set property 'Packed__c' of null.

Below is the code for reference:
  
<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>Packed:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>
    	<ui:button label="Packed!" press="{!c.packItem}"/>
    </p>
</aura:component>


({
	 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);     
     }
})

Can you please guide me where am going wrong.

Thanks.
Yashita
Amit VaidyaAmit Vaidya
Are you trying to run it or is you challenge didn't pass yet?
Yashita Goyal 17Yashita Goyal 17
Am trying to run it...
Amit VaidyaAmit Vaidya
Okay, Please try below code in your controller:

({
     packItem: function(component, event, helper) {
        var btn= event.getSource();
        var BtnMessage =btn.get("v.label");
        component.set("v.item","Packed");
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);     
     }
})

Thanks,
Amit
Amit VaidyaAmit Vaidya
Sorry, just making an correction to utilize the BtnMessage variable:
  
({
	 packItem: function(component, event, helper) {
        var btn= event.getSource();
		var BtnMessage =btn.get("v.label");
        component.set("v.item",BtnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);     
     }
})

 
Yashita Goyal 17Yashita Goyal 17
Thanks Amit, its working as expected :)

 
Amit VaidyaAmit Vaidya
That's cool! :-)
SaketSuman88SaketSuman88
Hi Amit, 
Just a confusion, in your controller code, you are setting "component.set("v.item",BtnMessage);" .
here "item" is an attribute in the campingListItem component of type "Camping_Item__c", so is it fine if we assign a String value to it?
Abhichandra Patil 10Abhichandra Patil 10
Please use the below

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

Hope you missed <ui:button> component in campingListItem component.
UgNderUgNder
Saroj,

Incorrectly mentioned action key name in your previous code snippet instead of "packitem".
 
Farid BoutakhedmitFarid Boutakhedmit
({
    packItem : function(component, event, helper) {
        var a= component.get("v.item");
        a.Packed__c= true;
        var b = event.getSource().get("v.label");
        component.set("v.item", b);
        component.set("v.disabled", true);
    }
})
Julie Fielding 3Julie Fielding 3
I have the code as written above, and am still getting the error "...Cannot set property 'Packed__c' of null...".  Any ideas?  

Component:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" />
    <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>
    <ui:button label="Packed!" press="{!c.packItem}"/>
</aura:component>

Controller:
({
     packItem: function(component, event, helper) {
        var a = component.get("v.item");
        a.Packed__c = true;
        component.set("v.item",a);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);  
       }
})
hemanth tanguturi 10hemanth tanguturi 10
Hi All,

with above 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
Ofir PopowskiOfir Popowski
Hello.

I understand component.get(String s). But how / why do some of you add a 'true' value to this function ?

I googled and couldn't find any documentation about it.
Jefferson FernandezJefferson Fernandez
Solution worked!. A humble opinion would be to provide a bit of explanation or comment on the solution and/or why the code on the question didn't work the first time. Thanks=)
Alfonso Luis MaquilanAlfonso Luis Maquilan
Hello Amit, can you explain your code line by line?

packItem : function (component, event, helper)
    {
        
        var btn = event.getSource();
        var btnMessage = btn.get("v.label");
        component.set("v.item" , btnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled" , "TRUE");
    }
Frank Mamone 19Frank Mamone 19
The validator is looking for;
Packed__c = true;

However, if you actually use it in the app it won't work and get the error message.

I suspect that we are trying to set a field value of an object of a record we don't have!
So, don't waste time trying to make it work, just put the code in as if there was actually a record and it will validate.

 
brinkal janani 27brinkal janani 27
I dont think so that below given snippet is a correct solution : 
packItem : function (component, event, helper)
    {
        var btn = event.getSource();
        var btnMessage = btn.get("v.label");
        component.set("v.item" , btnMessage);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled" , "TRUE");
    }

Here btnMessage(type "String") is being set on v.item(type = Custom_Item__c).  I failed trailhead validation few times and upon careful observation noticed that I was setting button label to 'Packed' and not ''Packed!' which causes the trailhead validation to fail. Hope this helps !
Solution posted by hemanth tanguturi 10 is correct ! 
Mohit Bhandari 3Mohit Bhandari 3
Please refer to the following code of the controller and change accordingly.
({
    packItem  : function(component, event, helper) {
        component.set("v.item",true);
        component.set("v.item.Packed__c",true);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    }
})


Regard 
Mohit 
 
Marcin UfniarzMarcin Ufniarz
If anyone is struggling with this challenge currently.  I found that when it asks you to create a "lightning" button, you actually have to use a <lightning:button /> component.  
<lightning:button label="Packed!" onclick="{!c.packItem }"/>
DANIEL MONSALVEDANIEL MONSALVE
Thank you Marcin, you are right.
If you use the ui button, it is not possible to pass the challenge.

The solution is to change 
<ui:button label="Packed!" press="{!c.packItem}"/>
With:
<lightning:button label="Packed!" onclick="{!c.packItem }"/>







 
Prakhar Agrawal 20Prakhar Agrawal 20
Please try the following code for the controller:
  
({
    packItem : function(component, event, helper) {
        var a = component.get("v.item",true);
        a.Packed__c = true;
        component.set("v.item",a);
        btnClicked = event.getSource();         // the button
        //var btnMessage = btnClicked.get("v.label"); // the button's label
        //component.set("v.item.Packed__c", true);
        btnClicked.set("v.disabled", true);
    }
})



 
Anvesh SinghAnvesh Singh
what is the problem with this code can anyone help me please

({
    packItem : function(component, event, helper) {
        var btnClicked=event.getSource();
        component.set("v.item.Packed__c",true);
        btnClicked.set("v.disabled",true);
    }
});
shanmukh prasadshanmukh prasad
Anvesh.. I think prpblem is you are setting the value of Item without taking the object into controller, I am not sure we directly manupulate the object values directly with out taking into controller.
If you define attrbute in component like below 
<aura:attribute name="item.Packed__c" type="String"/>
it may work :) :)
 
Shruti Mathur 59Shruti Mathur 59
Use the below simple code:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <lightning:input label="Name" value="{!v.item.Name}"/>
    <lightning:formattedNumber title="Price" value="{!v.item.Price__c}" style="currency"/>
    <lightning:formattedNumber title="Quantity" value="{!v.item.Quantity__c}"/>
    <lightning:input label="Packed" checked="{!v.item.Packed__c}" type="toggle"/>
</aura:component>
nithin kumar 48nithin kumar 48
Hi All, Please try the following code:


<aura:component>
    <aura:attribute name="item" type="Camping_Item__c"/>
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>

({
    packItem : function(component, event, helper) 
    {
        var a=component.get(v.item);
        a.Packed__c=True;
        component.set("v.item",a);
        
        var btn1= event.getsource();
        document.getElementById(btn1.id).disabled = true;
    }
})
Avani BhatnagarAvani Bhatnagar
I get this error when I save the component: "Failed to save campingListItem.cmp: Invalid <aura:attribute> type: Camping_Item__c: Source"

Any help will be appreciated. :)
M B KRRISH KUMARM B KRRISH KUMAR
<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:{!v.item.Name}</p>
    <p>{!v.item.Price}</p>
    <!--<p>{!item.Quantity__c}</p>-->
    <p>{!v.item.Packed__c}</p>
    
     <p>Price :
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
     <p>Quantity :
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
    </p>
    
     <p>
        <lightning:input type="toggle"                            
                         label="Packed"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
     </p> 
    
    <p>
    <lightning:button label="Packed!" onclick="{!c.packItem }"/>
    
    </p>
    
</aura:component>
===========================================================================================
({
    packItem : function(component, event, helper) {
        
        var a=component.get(v.item);
        a.Packed__c=True;
        component.set("v.item",a);
        
        var btn1=event.getSource();
        document.getElementById(btn1.id).disabled=true;
        
    }
})
rajenderrajender

!!​​​Completed
<div>
        <lightning:button label ="Packed!" onclick ="{!c.packItem }"/>
 </div>



CONTROLLER

({
    packItem : function(component, event, helper) {
        var v1 = component.get("v.item");
            v1.Packed__c = True;
        component.set("v.item", v1);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
    }
})
Mikhail RzhevskyMikhail Rzhevsky
that is fine
Rishabh Kumar 21Rishabh Kumar 21
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <lightning:formattedText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>
    </p>
   <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>  
    <p>
       <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
  Packed
    </p>
         <p>
              <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
    	
    </p>
   
</aura:component>

({
	 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);     
     }
})

 
Ankur Mittal15Ankur Mittal15
This worked for me
Component:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" />    
    <p>Name: <ui:outputText value="{!v.item.Name}" /></p>
    <p>Price: <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/></p>
    <p>Quantity: <lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>
    <p> <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    </p>
    <div>
        <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
 
   </div>
</aura:component>

Controller:
({
    packItem : function(component, event, helper) {
        var btnClicked = event.getSource();         
        var btnMessage = btnClicked.get("v.label");
        component.set("v.item.Packed__c", "true");     
        btnClicked.set("v.disabled",true);
    }
})
Peter Luo 6Peter Luo 6
({
	packItem : function(component, event, helper) {
		component.set("v.item.Packed__c", true);
        event.getSource().set("v.disabled",true);
	}
})

this is what worked for me
Robin Bansal 35Robin Bansal 35
below code worked fine for me:
({
    packItem : function(component, event, helper) {
        var btnClicked = event.getSource();
        component.set("v.item.Packed__c", true);
        btnClicked.set("v.disabled",true);
        
    }
})
Harsha vardhan 135Harsha vardhan 135
@anukur mittal15 thanks.. it worked for me
Nagaraju Mogili 50Nagaraju Mogili 50
Try this code

({
    packItem  : function(component, event, helper) {
        var res = component.get("v.item");
        res.Packed__c = true;
        res.disabled = true;
    }
})
Will Okanumeh 10Will Okanumeh 10
After multiple refactoring and search on the forum. I was able to pass with below code

campingListItem.cmp =>
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:false}" />
    <lightning:card title="{!v.item.Name}" iconName="standard:scan_card"
                    class="{!v.item.Packed__c ?'slds-theme--success' : ''}">
        <p>
            Name :<lightning:input value="{!v.item.Name}"/>
        </p>
        <p>
            Price :<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p>
            Quantity :<lightning:formattedNumber value="{!v.item.Quantity__c}" style="currency"/>
        </p>
        <p>
            <lightning:input type="toggle" label="Reimbursed?" name="reimbursed"                         
                             checked="{!v.item.Packed__c}" />
        </p>
        
        <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>

    </lightning:card>

campaingListItemController.js: =>
({
    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);
    }
})

 
Prashanth MPrashanth M
This works perfectly

<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>Packed:
    	<ui:outputCheckbox value="{!v.item.Packed__c}"/>
    </p>
    <p>Price:
    	<ui:outputCurrency value="{!v.item.Price__c}"/>
    </p>
    <p>Quantity:
		<ui:outputNumber value="{!v.item.Quantity__c}"/>
    </p>
    <p>
    	<lightning:button label="Packed!" onclick="{!c.packItem }"/>
    </p>
</aura:component>


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

 
Siarhei KarnialiukSiarhei Karnialiuk
This worked for me:
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c", true);
        component.set("v.disabled", true);
    }
})
Aswajit SwainAswajit Swain
This much work for me 
campingListItem.cmp
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p><lightning:input name="input8" value="{!v.item.name}" label="Name:" /></p>
    <p>
        <lightning:input type="number" name="input1" value="{!v.item.Quantity__c}" label="Quantity:" />
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed?:"                           
                         name="Packed?:"                         
                         checked="{!v.item.Packed__c}" />
    </p>
</aura:component>
ashutosh sahoo 10ashutosh sahoo 10
<aura:component  access="global" >
    <!-- item attribute is an instance of Camping_Item__c-->
    <aura:attribute name="item" type="Camping_Item__c" description="instance of Camping_Item__c object" required="true" default="{Packed__c : false}" access="global"/>
    <p>
        Name: {!v.item.Name}
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}"/>
    </p>
    
    <p>
        <lightning:input type="toggle"                            
                         label="Packed ?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
    </p> 
    
    <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
</aura:component>

For The Controller
({
    packItem : function(component, event, helper) {
        //set the Packed__c property of the item (instance of Camping_Item__c) attribute
        component.set("v.item.Packed__c",true);
            //event.getSource refers the source tag from the event has invoked. 
        //set the disabled attribute to true
            event.getSource().set("v.disabled",true);
    }
})
This One Will Work fine
kotha ramyakotha ramya
Hi Amith , 
({
2     packItem: function(component, event, helper) {
3        var btn= event.getSource();
4        var BtnMessage =btn.get("v.label");
5        component.set("v.item",BtnMessage);
6        var btnClicked = event.getSource();
7        btnClicked.set("v.disabled",true);    
8     }
9})

If you dont mind, Can u explain this code. I tried to understand but my efforts went in vain
Christos KolonisChristos Kolonis
In my opinion this code is easier to understand and pass the challenge.

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

 
AVINASH NAIR 7AVINASH NAIR 7
Thanks @
Rishabh Kumar 21,

Your suggestions really helped me to overcome the challenge quickly. :)
mansi gupta 41mansi gupta 41
hi guys !
correct code is here.
Component
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    
    <p>Name:
        <lightning:formattedText value="{!v.item.Name}"/>
    </p>
    <p>Price:
        <lightning:formattedNumber style="currency" value="{!v.item.Price__c}"/>
    </p>
   <p>Quantity:<lightning:formattedNumber value="{!v.item.Quantity__c}"/></p>  
    <p>
       <lightning:input type="toggle"                            
                         label="Packed?"                           
                         name="Packed"                         
                         checked="{!v.item.Packed__c}" />
  Packed
    </p>
         <p>
              <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
        
    </p>
   
</aura:component>
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------



Controller
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c", true);
        component.set("v.disabled", true);
    }
})

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

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






 
MANASA DHARMENDRANMANASA DHARMENDRAN
Controller code should be as below:

({
    packItem : function(component, event, helper) {
    
        component.set("v.item.Packed__c",true);
        component.set("v.disabled",true);
    }
})
らい こうらい こう
I write controller as below and it work ok.
({
    packItem : function(component, event, helper) {
        var btnClicked = event.getSource();
        var btnMessage = btnClicked.get("v.label"); // the button's label
        component.set("v.item.Packed__c", true);
        btnClicked.set("v.disabled",true);
    }
})
Chilakalapudi MaryChilakalapudi Mary
hi
This is exact code to complete your trailhead


<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>    
   
   <p>
        Name: 
        <lightning:formattedText value="{!v.item.Name}"/>
    </p>
    <p>
        Price: {!v.item.Price__c}
    </p>
    <p>
        Quantity: {!v.item.Quantity__c}
    </p>
    <p>
        Packed: {!v.item.Packed__c}
    </p>
    <p>Price:
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity:
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
    </p>
    <p>
        <lightning:input type="toggle"                            
                         label="Packed"                           
                         name="packed"                         
                         checked="{!v.item.Packed__c}" />
     </p>
    
    
</aura:component>
Chilakalapudi MaryChilakalapudi Mary
//controller
-----------------------------------------------------------------------------------------------------------------------------------------

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




//application
--------------------------------------------------------------------------------------------------------------
<aura:application >
   <c:campingListItem item="{!v.item}" />
</aura:application>
Yogesh MeltyYogesh Melty
Component:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
        <p>
            Name: {!v.item.Name}
        </p>
        <p>Price:
            <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p>Quantity:
            <lightning:formattedNumber value="{!v.item.Quantity__c}" style="Number"/>
        </p>
        <p>
            <lightning:input type="toggle"
                             label="Packed?"
                             name="packed"
                             checked="{!v.item.Packed__c}"/>
        </p>
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>

Controller:
({
    packItem : function(component, event, helper) {
        var btnclicked = event.getSource();
        btnclicked.set("v.item.Packed__c", true);
        btnclicked.set("v.disabled", true);
    }
})
Padrinath PrabaharPadrinath Prabahar
campingListItem.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
<!-- item attribute is an instance of Camping_Item__c-->
<aura:attribute name="item" type="Camping_Item__c" description="instance of Camping_Item__c object" required="true" default="{Packed__c : false}" access="global"/>
<p>
Name: {!v.item.Name}
</p>
<p>Price:
<lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
</p>
<p>Quantity:
<lightning:formattedNumber value="{!v.item.Quantity__c}"/>
</p>
<p>
<lightning:input type="toggle"
label="Packed ?"
name="Packed"
checked="{!v.item.Packed__c}" />
</p>
<lightning:button label="Packed!"
onclick="{!c.packItem}"/>
</aura:component>

campingListItemController.js

({
packItem : function(component, event, helper) {
//set the Packed__c property of the item (instance of Camping_Item__c) attribute
component.set("v.item.Packed__c",true);
//event.getSource refers the source tag from the event has invoked.
//set the disabled attribute to true
event.getSource().set("v.disabled",true);
}
})

campingListItemTestApp.app

<aura:application extends="force:slds">
<c:campingListItem item="{Price__c: 100, Packed__c: false, Quantity__c: 10, Name:'Test'}" />
</aura:application>
Mishal AnandMishal Anand
Hi,
<aura:component >
    <aura:attribute name="item"  type="Camping_Item__c"  /> <!-- required="true" type="String"  -->
    <p> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>
    <p>Name:
        <ui:outputText value="{!v.item.name}" /> 
    </p>

    <p>Quantity:
        <ui:outputNumber value="{!v.item.Quantity__c}" /> 
    </p>

    <p>Price:
        <ui:outputCurrency value="{!v.item.Price__c}" /> 
    </p>

    <p>Packed?:
        <ui:outputCheckbox value="{!v.item.Packed__c}" /> 
    </p>
    
    <p><ui:button label="Packed!" press="{!c.packItem}"></ui:button>
    </p>
</aura:component>

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

I have tried above code but i am getting an error " The campingListItem component doesn't contain a button with the correct label, or it doesn't call the correct function when clicked." Can someone help me please?

Thanks,
Mishal Anand
Rafael Lorenzi 10Rafael Lorenzi 10
my solution:

    packItem : function(component, event, helper) {
        
        var botao = component.find("button1"); //this is an aura:id
        botao.set("disabled",true);
        cmp.set("v.item.packed__c",true);
        
    }
Emanuele VaccaEmanuele Vacca
The cleanest and sintactically correct solution:

----------------------------COMPONENT---------------------------
 
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true" default="{Name:'Tent', Price__c:100, Quantity__c:1, Packed__c:true}"/>
    <p>{!v.item.Name}</p>
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD"/>
    <lightning:formattedNumber value="{!v.item.Quantity__c}" maximumFractionDigits="0"/>
    <lightning:input type="toggle" label="Packed?" name="packed" checked="{!v.item.Packed__c}"/>
    <lightning:button label="Packed!" onclick="{!c.packItem}"/>
</aura:component>

----------------------------CONTROLLER---------------------------
 
({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c", true);
        event.getSource().set('v.disabled',true);
    }
})
Adam Abusamra 4Adam Abusamra 4
A clean simplified form of the solution, Closer to the syntax in the trailhead module. 
({
	 packItem: function(component, event, helper) {
        component.set("v.item.Packed__c", "Packed");
        component.set(event.getSource().get("v.disabled"), "true");
    }
})

 
SpoilerAlertSpoilerAlert
@Emanuele Vacca Thanks for your code. I figured out what was wrong with mine. 
I changed my initial component from <aura:attribute name="item" type="Camping_item__c" required="true"}"/> to
<aura:attribute name="item" type="Camping_item__c" required="true" default="{Packed__c:true}"/>
and everything worked as it's supposed to. 
Alina Mus 2Alina Mus 2
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"/>
    <p>Name: {!v.item.Name}</p>
    <p>Price: 
        <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
    </p>
    <p>Quantity: 
        <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
    </p>
    <p>
        <lightning:input type="toggle"
                         label="Packed?"
                         name="packed"
                         checked="{!v.item.Packed__c}"/>
    </p>
    <div>
        <lightning:button label="Packed!" onclick="{!c.packItem}" disabled="false"/>
    </div>
</aura:component>

--------------------------------

({
    packItem : function(component, event, helper) {
        component.set("v.item.Packed__c", true)
        var btn = event.getSource();
        btn.set("btn.disabled", true)
    }
})
 
Hung VXHung VX
In campingListItem component:
<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true">
        <p>Name:
            <ui:outputText value="{!v.item.Name}"/>
        </p>
        <p>Price:
            <lightning:formattedNumber value="{!v.item.Price__c}" style="currency"/>
        </p>
        <p>Quantity:
            <lightning:formattedNumber value="{!v.item.Quantity__c}" style="number"/>
        </p>
        <p>
            <lightning:input type="toggle"                            
                             label="Packed?"                           
                             name="Packed"                         
                             checked="{!v.item.Packed__c}" />
         </p> 
        <p>
            <lightning:button label="Packed!"
            onclick="{!c.packItem}"/>
        </p>
    </aura:attribute>
</aura:component>

In campingListItemController:
({
     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);     
     }
})