+ Start a Discussion
Kolli SFDCKolli SFDC 

[Cannot read property 'setParams' of null]

Hi Folks,

Am quite new to Lightning and trying to understand Events so far i have created two components making Parent Child compoent with help of Events. But getting "Action failed: c:MySampleChildCmp$controller$handleClick [Cannot read property 'setParams' of null] Failing descriptor: {c:MySampleChildCmp$controller$handleClick}"
Unable to identify the Error.

Here is  the code.

ChildToParentEvent.evt:-

<aura:event type="COMPONENT">
    <aura:attribute type="String" name="firstName"/>
    <aura:attribute type="String" name="lastName"/>
    <aura:attribute type="String" name="Phone"/>
</aura:event>

MySampleChildCmp:- 
<aura:component>
    <!--<aura:attribute type="String" name="userData" default=""/>
    <aura:attribute type="String" name="firstName" default=""/>
    <aura:attribute type="String" name="lastname" default=""/>
    <aura:attribute name="Phone" type="Integer" default=""/>-->
    <aura:registerEvent name="ChildToParentEvnt" type="c:ChildToParent"/>
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>

MySampleChildCmpController:- 
({
    handleClick : function(component, event, helper) {
        alert('called Child component');        
        var evt = component.getEvent("c.ChildToParentEvnt");
        evt.setParams({'firstName' : SFDC,
                        'lastName' : Developer,
                        'Phone' : 9999999
                       });
            evt.fire();
        alert('called Event');
    }
})

MySampleParentCmp:-
<aura:component >
    <aura:attribute type="String" name="userData" default="" />
    <aura:attribute type="String" name="firstName" default="ABC" />
    <aura:attribute type="String" name="lastName" default="DEF" />
    <aura:attribute type="Integer" name="Phone" default="" />
    <aura:attribute type="boolean" name="callChild" default="false" />
    <aura:handler name="ChildToParentEvnt" event="c:ChildToParent" action="{!c.handleClick}"/>
        <div>
           <c:MySampleChildCmp />
    </div>
    <div>
        <h2>User Data from Event </h2>
        Name    : {!firstName} {!lastName}<br/><br/>
        Phone    : {!Phone}
    </div>
</aura:component>

MySampleParentController:-

({
    handleClick : function(component, event, helper) {
        alert('Called Parent');
        var lastName= event.getParam('lastName');
        var firstName= event.getParam('firstName');
        var Phone= event.getParam('Phone');
        component.set('v.lastName', lastName);
        component.set('v.firstName', firstName);
        component.set('v.phone', Phone);
    }
})


Thanks in Advance,
Ragav
Best Answer chosen by Kolli SFDC
Amol Rokade 26Amol Rokade 26
Hi Ragav, 

Please find below updated code which is working:
MySampleParentCmp.cmp:
<aura:component >
    <aura:attribute type="String" name="userData" default="" />
    <aura:attribute type="String" name="firstName" default="ABC" />
    <aura:attribute type="String" name="lastName" default="DEF" />
    <aura:attribute type="String" name="phone" default="" />
    <aura:attribute type="boolean" name="callChild" default="false" />
    <aura:handler name="ChildToParentEvnt" event="c:ChildToParentEvent1" action="{!c.handleClick}"/>
        <div>
           <c:MySampleChildCmp />
    </div>
    <div>
        <h2>User Data from Event </h2>
        Name    : {!v.firstName} {!v.lastName}{!v.Phone}<br/><br/>
        Phone    : {!v.phone}
    </div>
</aura:component>
-------------------------------------
MySampleparent JS Controller:

({
    handleClick : function(component, event, helper) {
        alert('Called Parent');
        var lastName= event.getParam('lastName');
          alert('lastName=='+lastName);
        var firstName= event.getParam('firstName');
        var Phone= event.getParam('Phone');
         alert('Phone=='+Phone);
        component.set('v.lastName', lastName);
        component.set('v.firstName', firstName);
        component.set('v.phone', Phone);
    }
})

---------------------
MySampleChildCmp.cmp

<aura:component>
    <!--<aura:attribute type="String" name="userData" default=""/>
    <aura:attribute type="String" name="firstName" default=""/>
    <aura:attribute type="String" name="lastname" default=""/>
    <aura:attribute name="Phone" type="Integer" default=""/>-->
    <aura:registerEvent name="ChildToParentEvnt" type="c:ChildToParentEvent1"/>
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>
----------------------------------------
MySampleChildCmp Controller:


({
    handleClick : function(component, event, helper) {
        alert('called Child component');        
        var evt = component.getEvent("ChildToParentEvnt");
        evt.setParams({'firstName' : 'SFDC',
                        'lastName' : 'Developer',
                        'Phone' : '9999999'
                       });
            evt.fire();
        alert('called Event');
    }
})

=============================

Please mark answer as correct

All Answers

Amol Rokade 26Amol Rokade 26
Hi Ragav, 

Please find below updated code which is working:
MySampleParentCmp.cmp:
<aura:component >
    <aura:attribute type="String" name="userData" default="" />
    <aura:attribute type="String" name="firstName" default="ABC" />
    <aura:attribute type="String" name="lastName" default="DEF" />
    <aura:attribute type="String" name="phone" default="" />
    <aura:attribute type="boolean" name="callChild" default="false" />
    <aura:handler name="ChildToParentEvnt" event="c:ChildToParentEvent1" action="{!c.handleClick}"/>
        <div>
           <c:MySampleChildCmp />
    </div>
    <div>
        <h2>User Data from Event </h2>
        Name    : {!v.firstName} {!v.lastName}{!v.Phone}<br/><br/>
        Phone    : {!v.phone}
    </div>
</aura:component>
-------------------------------------
MySampleparent JS Controller:

({
    handleClick : function(component, event, helper) {
        alert('Called Parent');
        var lastName= event.getParam('lastName');
          alert('lastName=='+lastName);
        var firstName= event.getParam('firstName');
        var Phone= event.getParam('Phone');
         alert('Phone=='+Phone);
        component.set('v.lastName', lastName);
        component.set('v.firstName', firstName);
        component.set('v.phone', Phone);
    }
})

---------------------
MySampleChildCmp.cmp

<aura:component>
    <!--<aura:attribute type="String" name="userData" default=""/>
    <aura:attribute type="String" name="firstName" default=""/>
    <aura:attribute type="String" name="lastname" default=""/>
    <aura:attribute name="Phone" type="Integer" default=""/>-->
    <aura:registerEvent name="ChildToParentEvnt" type="c:ChildToParentEvent1"/>
    <lightning:button variant="brand" label="Brand action" title="Brand action" onclick="{! c.handleClick }" />
</aura:component>
----------------------------------------
MySampleChildCmp Controller:


({
    handleClick : function(component, event, helper) {
        alert('called Child component');        
        var evt = component.getEvent("ChildToParentEvnt");
        evt.setParams({'firstName' : 'SFDC',
                        'lastName' : 'Developer',
                        'Phone' : '9999999'
                       });
            evt.fire();
        alert('called Event');
    }
})

=============================

Please mark answer as correct
This was selected as the best answer
Nayana KNayana K
Looks like syntax error.
replace
var evt = component.getEvent("c.ChildToParentEvnt");

To
var evt = component.getEvent("ChildToParentEvnt");