[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: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

September 23, 2019
·
Like
0
·
Follow
1

Best Answer chosen by Kolli

Amol 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: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