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
Vipul Dalal 19Vipul Dalal 19 

Lighting Components Basic - Null value being passed to lightning component

In the "Input Data Using Forms", I am getting NULL pointer error when I call "campingListItem" LIghtning component and I can't seem to figure out why.  In the loop below, I am able to successfully view the values of the "item" right before passing it into the campingListItem component.  

The error I get is the following:
Error

campingList.cmp
 
<aura:component controller="CampingListController">

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>
    
........removed code showing form to enter new items as NewItem......
    
    <lightning:card title="Camping Items">
        <p class="slds-p-horizontal--small">
            
            
            <aura:iteration items="{!v.items}" var="item">
                <!-- I CAN SUCCESSFULLY SEE THE FOLLOWING 3 VALUES -->
				{!item.Name}, {!item.Quantity__c}, {!item.Price__c} 
                
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
            
        </p>
        
    </lightning:card>
</aura:component>

campingListItem.cmp - I significantly simplified the code here already for debugging.
 
<aura:component >
    
    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <tr>
        <td><ui:outputText value="{!item.Name}"/></td>
    </tr> 
        
</aura:component>

 
Best Answer chosen by Vipul Dalal 19
Naveen PoojaryNaveen Poojary
Hi Vipul,
In your child component, you have not used v.attribute_name   to display the values throughout the component. Use expressions as {!v.item.Name}.
It will solve your issue. 
Please make it as best answer if it is helpful.

All Answers

Vipul Dalal 19Vipul Dalal 19
Update: When I removed the <tr></tr> part from campingListItem.cmp and added init handler in that component (under <aura:component>), I was able to view the values of the items via , but then received the following error.  Given that, I have copied all of my code below.

Error when I campingListItem component only has init handler and nothing else.
campingHeader.cmp (called by TestCamping.app)
<aura:component >
       
        <!-- PAGE HEADER -->
        <lightning:layout class="slds-page-header slds-page-header--object-home">
            <lightning:layoutItem >
                <lightning:icon iconName="action:goal" alternativeText="Camping"/>
            </lightning:layoutItem>
            <lightning:layoutItem padding="horizontal-large">
                <div class="page-section page-header">
                    <h1 class="slds-text-heading--label">Camping List</h1>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
        <!-- / PAGE HEADER -->
    
        <c:campingList />
    
</aura:component>
campingList.cmp
<aura:component controller="CampingListController">

    <aura:handler name="init" action="{!c.doInit}" value="{!this}"/>
    
    
    <aura:attribute name="items" type="Camping_Item__c[]"/>

    <aura:attribute name="newItem" type="Camping_Item__c" 
                    default="{'sobjectType': 'Camping_Item__c',
                             'Name': 'Enter item here',
                             'Quantity__c': 0,
                             'Price__c': 0,
                             'Packed__c': false }"/>
    
    
    <!-- NEW  FORM -->
    <lightning:layout >
        <lightning:layoutItem padding="around-small" size="6">
            
            <!-- CREATE NEW CAMPING ITEM -->
            <div aria-labelledby="newitemform">
                
                <!-- 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 Camping Item
                    </legend>
                    
                    <!-- CREATE NEW ITEM FORM -->
                    <form class="slds-form--stacked">          
                        <lightning:input aura:id="itemform" label="Item Name"
                                         name="itemname"
                                         value="{!v.newItem.Name}"
                                         required="true"
                                         messageWhenValueMissing="Must have an item name"/> 
                        <lightning:input type="number" aura:id="itemform" label="Quantity"
                                         name="itemquantity"
                                         min="1"
                                         step="1"
                                         value="{!v.newItem.Quantity__c}"
                                         messageWhenRangeUnderflow="Enter an amount that's at least 1"/>
                        <lightning:input type="number" aura:id="itemform" label="Price"
                                         name="itemprice"
                                         formatter="currency"
                                         step="0.01"
                                         value="{!v.newItem.Price__c}"/>
                        <lightning:input type="checkbox" aura:id="itemform" label="Packed?"
                                         name="itempacked"
                                         checked="{!v.newItem.Packed__c}"/>
                        <lightning:button label="Create Item" 
                                          class="slds-m-top--medium"
                                          variant="brand"
                                          onclick="{!c.clickCreateItem}"/>
                    </form>
                    <!-- / CREATE NEW ITEM FORM -->
                    
                </fieldset>
                <!-- / BOXED AREA -->
                
            </div>
            <!-- / CREATE NEW ITEM -->
            
        </lightning:layoutItem>
    </lightning:layout>
    <!-- / NEW ITEM FORM -->
    
    <lightning:card title="Camping Items">
        <p class="slds-p-horizontal--small">
            
            
            <aura:iteration items="{!v.items}" var="item">
				{!item.Name}, {!item.Quantity__c}, {!item.Price__c}                 
                <c:campingListItem item="{!item}"/>
            </aura:iteration>
            
        </p>
        
    </lightning:card>

    
</aura:component>
campingListController.js
 
({
    // Load items from Salesforce
    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 (state === "SUCCESS") {
                component.set("v.items", response.getReturnValue());
            }
            else {
                console.log("Failed with state: " + state);
            }
        });

        // Send action off to be executed
        $A.enqueueAction(action);
    },
    
    
    clickCreateItem : function(component, event, helper) {
        var validItem = component.find('itemform').reduce(function (validSoFar, inputCmp) {
            // Displays error messages for invalid fields
            inputCmp.showHelpMessageIfInvalid(); 
            return validSoFar && inputCmp.get('v.validity').valid;
        }, true);
        
        // If we pass error checking, do some real work
        if(validItem){
            // Create the new expense
            var newItem = component.get("v.newItem");
            console.log("Create New Camping Item: " + JSON.stringify(newItem));
                 
            //
            // Add the new item to the list
            // 
            
            var theItems = component.get("v.items");
            
            // Copy the Item to a new object
            // THIS IS A DISGUSTING, TEMPORARY HACK
            var newItem = JSON.parse(JSON.stringify(newItem));
            
            
            console.log("Items before 'create': " + JSON.stringify(theItems));
            theItems.push(newItem);
            component.set("v.items", theItems);
            console.log("Items after 'create': " + JSON.stringify(theItems)); 
            
            
            //
            //reset the newItem value provider with a blank sObjectType of Camping_Item__c    
            //
            component.set("v.newItem",{'sobjectType':'Camping_Item__c',
                'Name': '',
                'Quantity__c': 0,
                'Price__c': 0,
                'Packed__c': false});  
        }
    },
    
        dispitem : function(component, event, helper) {
        var theitem = component.get("v.item");
        console.log("The Item in CampingList durint iteration: " + JSON.stringify(theitem));
    }
})

CampingListController.apxc
 
public with sharing class CampingListController {

    @AuraEnabled
    public static List<Camping_Item__c> getItems() {
        
        // Check to make sure all fields are accessible to this user
        String[] fieldsToCheck = new String[] {
            'Id', 'Name', 'Price__c', 'Quantity__c', 'Packed__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;
            }
        }
        
        // OK, they're cool, let 'em through
        List<Camping_Item__c> campinglist = [SELECT Id, Name, Price__c, Quantity__c, Packed__c 
                FROM Camping_Item__c];
        
        // 
        // 
        // REMOVE LATER - I am able to see the 3 records that were already in the database
        // 
        // 
        for (Camping_Item__c myitem: campinglist){
            system.debug('Item: ' + myitem + '\n');
        }
       	
        return campinglist;
    }

    
    @AuraEnabled
    public static Camping_Item__c saveItem (Camping_Item__c item) {
        // Perform isUpdatable() checking first, then
        upsert item;
        return item;
    }

}
campingListItem.cmp
<aura:component >
   
    <aura:handler name="init" value="{!this}" action="{!c.dispitem}"/>

    <aura:attribute name="item" type="Camping_Item__c"/>
    
    <lightning:card title="{!item.Name}" iconName="action:goal"
                    class="{!item.Packed__c ?
                           'slds-theme--success' : ''}">
        
        <p class="slds-text-heading--medium slds-p-horizontal--small">
            Price: <lightning:formattedNumber value="{!item.Price__c}" style="currency"/>
        </p>
        <p class="slds-p-horizontal--small">
            Quantity: {!item.Quantity__c}
        </p>
        <p>
            <lightning:input type="toggle" 
                             label="Packed?"
                             name="packed"
                             class="slds-p-around--small"
                             checked="{!item.Packed__c}"
                             messageToggleActive="Yes"
                             messageToggleInactive="No"
                             onchange="{!c.packItem}"/>
        </p>
    </lightning:card>
 
</aura:component>

campingListItemController.js
 
({
	packItem : function(component, event, helper) {
		var btn = event.getSource(); //the button
        
        //set Packed as true     
        var myitem = component.get("v.item",true);
        myitem.Packed__c = true;
        component.set("v.item", myitem);
        
        //disable the button
        btn.set("v.disabled", true);
	},
    
    dispitem : function(component, event, helper) {
        var theitem = component.get("v.item");
        console.log("The Item in CampingListItem: " + JSON.stringify(theitem));
        system.debug('In dispitem, the item is: ' + theitem);
    }
})

With the above code, I get the following error.  I don't even get to the point where I can enter any additional items using the form.

User-added image


Thank you,
Vipul



 
Naveen KNNaveen KN
Vipul, I can see that you have mentioned attribute with the name items but during its reference in the code it is mentioned as item, change that and verify once.

cmp > campingList.cmp

@naveenkn55
Naveen PoojaryNaveen Poojary
Hi Vipul,
In your child component, you have not used v.attribute_name   to display the values throughout the component. Use expressions as {!v.item.Name}.
It will solve your issue. 
Please make it as best answer if it is helpful.
This was selected as the best answer
Vipul Dalal 19Vipul Dalal 19
Thank you Naveen.  That solved the issue.