Cannot read property 'setParams' of null

Question

my set params is null for some reason. But the variables i'm passing in do have values. I have a console.log before I set params to check before the parameters are set to their values.

Can anyone spot something wrong in my code?`

onDrop: function(component, event, helper)
{
    event.preventDefault();

    var index = component.get('v.index');
    var seatNumber = component.get('v.seatNumber');
    console.log("Target Item Index:",index,"\nTarget Item Seat:",seatNumber); //These work, and have values.

    var cardSwapEvent = component.getEvent('CardOnCardSwap');
    cardSwapEvent.setParams({'seatNumber': seatNumber, index: index}); //This complains "Cannot read property 'setParams' of null"
    cardSwapEvent.fire();

    console.log("CardonCard");
}`

Console output:

Moved Item index: 0 Moved Item Seat: 1 Card.js:26 Target Item Index: 1 Target Item Seat: 2

Error message:

This page has an error. You might just need to refresh it. Action failed: c:Card$controller$onDrop [Cannot read property 'setParams' of null] Failing descriptor: {c:Card$controller$onDrop}

Answer 1

Looking at your question and comments, I can see following issues. I will strongly recommend to edit your question to put every details in the original post.

1. You have declared the name of the component event in your registering lightning component as cardSwapRegister
2. You are trying to set the parameters on the component event in your JS controller using the name as CardOnCardSwap
3. You have declared the component event in your handler lightning component as cardSwapped

None of the names at any place matches and thus you are encountering the issue where you are not able to set the values, and retrieve the values.

For component events, you communicate between your lightning components using the name. That means that the name in your registering LC and the handler LC should be always same. And that you use the same name in any of the JS controllers too.

This is from the documentation:

The name attribute in <aura:handler> must match the name attribute in the tag in the component that fires the event.

Once you fix the naming issues across the components, you should be able to have it working.