function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Ashish Narkhede 13Ashish Narkhede 13 

Lightning Trailhead: The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.

Hi, 
I am trying to finish Handle Actions with Controllers section iin Lightning components trailhead. My code works as asked in the challenge.
But I still get this error:
Challenge Not yet complete... here's what's wrong: 
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.


<aura:component >
    <aura:attribute name='item' type='Camping_Item__c' required='true' default="{Name:'Torch', Price__c: 10, Quantity__c: 1, Packed__c: false}"></aura:attribute>
    <aura:attribute name='disabled' type='Boolean'></aura:attribute>
    
    <ui:outputText value='{!v.item.Name}'></ui:outputText>
    <ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
    <ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
    <ui:outputNumber value="{!v.item.Quantity__c}"></ui:outputNumber>
    
    <ui:button press='{!c.packItem}' disabled='{!v.disabled}' label='Packed!'></ui:button>
</aura:component>

({
    packItem : function(component, event, helper) {
        var item = component.get('v.item');
        component.set('v.item.Packed__c', true);
        var btnPackItem = event.getSource();
        btnPackItem.set('v.disabled', true);
    }
})
Nayana KNayana K
({
    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);
    }
})


 
<aura:component >
    <aura:attribute name='item' type='Camping_Item__c' required='true' default="{Name:'Torch', Price__c: 10, Quantity__c: 1, Packed__c: false}"></aura:attribute>

    
    <ui:outputText value='{!v.item.Name}'></ui:outputText>
    <ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
    <ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
    <ui:outputNumber value="{!v.item.Quantity__c}"></ui:outputNumber>
    
    <ui:button press='{!c.packItem}' label='Packed!'></ui:button>
</aura:component>




 
Ashish Narkhede 13Ashish Narkhede 13
Still doesn't work! Is there a bug with Trailhead?
Nayana KNayana K
<aura:component >
    <aura:attribute name='item' type='Camping_Item__c' required='true' default="{'sobjectType': 'Camping_Item__c', 'Name':'Torch', 'Price__c': 10, 'Quantity__c': 1, 'Packed__c': false}"></aura:attribute>

    
    <ui:outputText value='{!v.item.Name}'></ui:outputText>
    <ui:outputCheckbox value="{!v.item.Packed__c}"></ui:outputCheckbox>
    <ui:outputCurrency value="{!v.item.Price__c}"></ui:outputCurrency>
    <ui:outputNumber value="{!v.item.Quantity__c}"></ui:outputNumber>
    
    <ui:button press='{!c.packItem}' label='Packed!'></ui:button>
</aura:component>
try above code once
({
    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);
    }
})

 
maurizio colombo 8maurizio colombo 8
I have the same issue
john conway 3john conway 3
I had to make one minor change to complete the challange

The challange would not accept
    
    <ui:button press='{!c.packItem}' label='Packed!'></ui:button>

I made the following minor change and was able to complete the challange

<<ui:button  label='Packed!' press='{!c.packItem}'></ui:button>

 
maurizio colombo 8maurizio colombo 8
Yes, putting label before than press it works
thanks
Nehal NeemaNehal Neema

Hello,

Even I got the same error :

Challenge Not yet complete... here's what's wrong: 
The campingListItem Lightning Component doesn't contain a button or its attributes are not set correctly when clicked.

Putting Label before Press also doesn't works in my case. If someone can help me with this.

Here's my code :

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"
      default="{Name:'Ball', Price__c: 10, Quantity__c: 1, Packed__c: false}" />
     
    <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>
    
    <div>
        <ui:button label="Packed" press="{!c.packItem}"/>
    </div>

</aura:component>
 

And the Controller Code :

({
    packItem : function(component, event, helper) {
        var item = component.get("v.item");
        item.Packed__c = true;
        //item.Quantity__c = "12";
        component.set("v.item",item);
        var btnClick = event.getSource();
        btnClick.set("v.disabled",true);
    }
})
Avinash Kotha 29Avinash Kotha 29
@nehal,
Change the controller code from 
var item = component.get("v.item");
to
var item = component.get("v.item",true);

It works !!
Rakesh Kumar SainiRakesh Kumar Saini
Use label as Packed! instead of Packed. Problem is with label of ui:button. Add ! in end of label.
Pritam DasPritam Das
Hello All!
I am still getting the same error. I have checked the component and controller code through a lightning app, and it's working fine. But when clicking on 'Check Challenge' on the trailhead page, getting the error. Below is my code sample

app code: 
<aura:application >
    <c:campingListitem />
</aura:application>

campingListItem componenet code
<aura:component >
	<aura:attribute name="item" type="Camping_Item__c" required="true"
                    default="{Name:'Pen', Price__c:50, Quantity__c:10, Packed__c:false}"/>
    
       <p> Name: <ui:outputText value="{!v.item.Name}"/></p> 
       <p> Price:<ui:outputCurrency value="{!v.item .Price__c}"/> </p>   
       <p>Qualtity: <lightning:formattedNumber 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>

campingListItemController.js code
 
({
	packItem : function(component, event, helper) {
		 var abc = component.get("v.item",true);
        abc.Packed__c = true;
        component.set("v.item",abc);
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);  

	}
})

screenshotsscreenshots

if anyone can check what is the issue in this code, it will be very helpful.

Thanks!
Anas LABRITIAnas LABRITI
Hello All, 
Just use the <lightning:button ...> component and it will work.
Like this : 
<aura:component > 
    <aura:attribute name="item" type="Camping_Item__c" default="{
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>          
	<p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>
If above code fixed you problem please mark this is best answer.

Best Regards

 
Pritam DasPritam Das
Thanks a ton!  your suggestion fixed my issue. :) 
shashi kumar 58shashi kumar 58
Use the Below code for this issue 100% it will work.
<aura:component > 
    <aura:attribute name="item" type="Camping_Item__c" default="{
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>          
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>

Controller.js

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

    }
})

Please mark it as best answer:)
Prashidha ShresthaPrashidha Shrestha
Try this code.

<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="integer"/>
    </p>
    <p>
        <lightning:input type="toggle"
                         name="Packed"
                         label="Packed:"
                         checked="{!v.item.Packed__c}"
                         />
    </p>
    </aura:component>
Amjad Khan 66Amjad Khan 66
Its very fine 100% true.
CMP
<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>Packed:
        <lightning:input type="toggle" label="Packed" name="packed" checked="{!v.item.Packed__c}"/>
    </p>
</aura:component>

JS

({
    packItem : function(component, event, helper) {
        
        var a = component.get("v.item");
        a.Name = 'Item2';
        a.Quantity__c = 20;
        a.Price__c = 200;
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
    }
})
Amjad Khan 66Amjad Khan 66
next trailhead answer:
<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>
     <div>
        <lightning:button label="Packed!" onClick="{!c.packItem}"/>
    </div>
</aura:component>
Mohammad NazzalMohammad Nazzal

I got same error and non of above solutions worked with me. The issue cause is in the tag <ui:button> which shouldn't be used in the excercise. 

Replace the <ui:button> tag with <lightning:button>

Component:

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" default 
                                                                {'sObjectType':'Camping_Item__c',
                                                                'Name':'Item1',
                                                                'Quantity__c':10,
                                                                'Price__c':100,
                                                                'Packed__c':false}"/>
    <p><ui:outputText value="{!v.item.Name}" /></p>
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <!--<p><ui:button label="" press="{!c.packItem}"/></p>-->
    <p><lightning:button variant="base" label="Packed!" title="Packed!" onclick=" 
          {!c.packItem}"/> </p>
</aura:component>
 

Controller:

({
    packItem : function(component, event, helper) {
        
        var a = component.get("v.item", true);
        a.Name = 'Item2';
        a.Quantity__c = 10;
        a.Price__c = 100;
        a.Packed__c = true;
        component.set("v.item",a);
        
        var btnClicked = event.getSource();
        btnClicked.set("v.disabled",true);
        
    }
})
 

 

 

 

 

 

Zunaid Mahdi 10Zunaid Mahdi 10

It Worked for me :) : 

 

<aura:component >
    <aura:attribute name="item" type="Camping_Item__c" required="true"
                            default="{Name:'Pen', Price__c:50, Quantity__c:10, Packed__c:false}"/>
    <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}" 
                         messageToggleActive="Yes"
                             messageToggleInactive="No"/>
     </p> 
</aura:component>

ahmed loudrassiahmed loudrassi
Component Code :
<aura:component >
    <aura:attribute name ="item" type ="Camping_Item__c"
                    required ="true"/>
    <p>{! v.item.Name}</p> 
    <p><lightning:formattedNumber value = "{! v.item.Price__c}" style = "currency" /></p>
    <p><lightning:formattedNumber value = "{! v.item.Quantity__c}"/></p>
    <p><lightning:input type = "toggle" checked ="{! v.item.Packed__c}" /></p>
    <p><lightning:button label="Packed!" onclick="{! c.packItem}"/></p>
</aura:component>

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

it'll work for you 
Antonio Diaz AlvarezAntonio Diaz Alvarez
<p><ui:outputText value="{!v.item.Name}" /></p>
    <p><ui:outputNumber value="{!v.item.Quantity__c}" /></p>
    <p><ui:outputCurrency value="{!v.item.Price__c}" /></p>
    <p><ui:outputCheckbox value="{!v.item.Packed__c}" /></p>
    <!--<p><ui:button label="" press="{!c.packItem}"/></p>-->
    <p><lightning:button variant="base" label="Packed!" title="Packed!" onclick=" 
          {!c.packItem}"/> </p>
Mesage: Lightning Trailhead: The campingListItem Lightning Component doesn't contain a button or its attributes...

Fail tags <ui:
Correct work replace all marks <ui: -> to <lightning:
Regards.
 
Jose Andres SilvaJose Andres Silva
Hello all,

I'm struggling with the code to this challenge. Already tried several changes and follow some answers from this topic, but I still have problems with it. Below, the code that I wrote:

Component:
<aura:component>
    <aura:attribute name="item" type="Camping_Item__c" required = "true" 
     default = "{'sobjectType': 'Camping_Item__c', 'Name':'Torch', 'Price__c': 10, 'Quantity__c': 1, 'Packed__c': false}"/>
    
    
    <div>
        
            <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>
        
    </div>
        <ui:Button press='{!c.handleClick}' label='Packed!'/> 
</aura:component>


Controller:
({
    handleClick : function(component, event, helper) {
        var a = component.get("v.item", true)
        var btnClicked = event.getSource();
        btnClicked.set("v.disable", true);
        component.set("v.item", a);
        
    }
})

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

Can any one help with this?

Thanks
Vikash Kumar 226Vikash Kumar 226
Got 500 marks working cool
({
    packItem : function(component, event, helper) {
        //var a = component.get("v.item",true);
        //a.Packed__c = true;
        component.set("v.item.Packed__c",true);
        component.set("v.disabled",true);
    }
})



<aura:component >
    <aura:attribute type="Camping_Item__c" name="item" required="true"/>
    <aura:attribute type='boolean' default = "false" name="disabled"/>
    <lightning:formattedText    title="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 type="toggle"                            
                         label="Packed ?"                           
                         name="Packed "                         
                         checked="{!v.item.Packed__c }" />
    
    <lightning:button label="Packed!" title="Pack Item" onclick="{! c.packItem }" name="btn" disabled='{!v.disabled}'/>
    
</aura:component>
Darshan Gandhi 12Darshan Gandhi 12

I have currently completed this course in my trailhead and this is my Campainitemlist component and controller
This works definitely.

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> The Item is <ui:outputText value ="{!v.item}"></ui:outputText></p>

        <ui:outputText value="{!v.item.Name}"/>
    <lightning:input type="toggle" label="Packed" name="togglevalue" checked="{!v.item.Packed__c}" />
    <lightning:formattedNumber value="{!v.item.Price__c}" style="currency" currencyCode="USD" currencyDisplayAs="symbol"/>

    <lightning:formattedNumber  value="{!v.item.Quantity__c}"/>
    
    <lightning:button name="packed" label="Packed!" onclick="{!c.packItem}" disabled="false"  />
</aura:component>

Controller

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