+ Start a Discussion
Rakesh SRakesh S 

The campingHeader component doesn't appear to be using 'lightning:layout'.

Hello everyone,

while doing Trailhead, i'm getting the error like "The campingHeader component doesn't appear to be using 'lightning:layout'.".

my code:
<aura:component >
	<aura:attribute name="item" 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}"/>
    
    <!-- PAGE HEADER -->
    <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="My Camping"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
            <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Campings</h1>
                <h2 class="slds-text-heading--medium">Camping List</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / PAGE HEADER,horizontal -->    
    
    <!-- NEW EXPENSE FORM -->
    <lightning:layout>
        <lightning:layoutItem padding="around-small" size="6">
            <!-- CREATE NEW EXPENSE -->
            <div aria-labelledby="newexpenseform">
                <!-- BOXED AREA -->
                <fieldset class="slds-box slds-theme--default slds-container--small">
                <legend id="newexpenseform" class="slds-text-heading--small 
                  slds-p-vertical--medium">
                  Add Expense
                </legend>
          
                <!-- CREATE NEW EXPENSE FORM -->
                <form class="slds-form--stacked">          
                    <lightning:input aura:id="CIform" label="Camping Item Name"
                                     name="itemName"
                                     value="{!v.newItem.Name}"
                                     required="true"/> 
                    <lightning:input type="number" aura:id="CIform" label="Quantity"
                                     name="itemQuantity"
                                     min="1"                                     
                                     step="0.01"
                                     value="{!v.newItem.Quantity__c}"
                                     messageWhenRangeUnderflow="Enter an Quantity that's at least 1."/>
                    <lightning:input aura:id="CIform" label="Price"
                                     name="itemPrice"
                                     formatter="currency"
                                     value="{!v.newItem.Price__c}" />
                   <!-- <lightning:input type="date" aura:id="CIform" label="Expense Date"
                                     name="expensedate"
                                     value="{!v.newItem.Date__c}"/>-->
                    <lightning:input type="checkbox" aura:id="CIform" label="Packed__c?"  
                                     name="expreimbursed"
                                     checked="{!v.newItem.Packed__c}"/>
                    <lightning:button label="Create Item" 
                                      class="slds-m-top--medium"
                                      variant="brand"
                                      onclick="{!c.clickCreateItem}"/>
                </form>
                <!-- / CREATE NEW EXPENSE FORM -->
          
              </fieldset>
              <!-- / BOXED AREA -->
            </div>
            <!-- / CREATE NEW EXPENSE -->
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>
Please help me anyone to resolve the issue. I appriciate your response.

Thanks.
Khan AnasKhan Anas (Salesforce Developers) 
Hi Rakesh,

Greetings to you!

CampingHeader component should look like this:
<aura:component >
      <lightning:layout class="slds-page-header slds-page-header--object-home">
        <lightning:layoutItem>
            <lightning:icon iconName="action:goal" alternativeText="Camping List"/>
        </lightning:layoutItem>
        <lightning:layoutItem padding="horizontal-small">
             <div class="page-section page-header">
                <h1 class="slds-text-heading--label">Camping</h1>
                <h2 class="slds-text-heading--medium">Camping List</h2>
            </div>
        </lightning:layoutItem>
    </lightning:layout>
</aura:component>

Please refer to the below link which might help you further with the above requirement.

https://techevangel.com/2018/04/15/trailhead-challenge-create-a-form-to-enter-new-items/

http://faizanaz90.blogspot.com/2017/11/lightning-components-basics-input-data.html

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
Rakesh SRakesh S
Hi Khan Anas,

thanks for your response. i created separate component for CampingHeader but still showing the same error and the output is like User-added image
Thanks.