Hi,
I am facing issue with challenge 6 it gives error as in below screenshot


 

I don't understand I have created the onBoatSelected controller function to run when BoatSelected application event is fired...but still I am getting this error. I have checked console log and I am getting all the boat details in my BoatDetails component. Below is my code -

BoatTile.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="boat" type="Boat__C"/>
    <aura:attribute name="selected" type="Boolean"/>
    <aura:registerEvent name="BoatSelect" type="c:BoatSelect"/>
    <aura:registerEvent name="BoatSelected" type="c:BoatSelected"/>
    <!--<lightning:button class="tile{! v.selected ? 'selected' : 'tile' }" onclick="{!c.onBoatClick}">
        <div style="{!'background-image:URL(\'+v.boat.Picture__c+'\')'}" class="innertile">
              <div class="lower-third">
                   <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>
              </div>
        </div>
    </lightning:button> -->
    

    <lightning:button class="{!v.selected ? 'tile selected' : 'tile'}" onclick="{!c.onBoatClick}">

        <div style="{!'background-image: url(\'' + v.boat.Picture__c + '\')'}" class="innertile">

            <div class="lower-third">

                <h1 class="slds-truncate">{!v.boat.Contact__r.Name}</h1>

            </div>

        </div>

    </lightning:button>
    
</aura:component>



BoatTileController.js

onBoatClick : function(component, event, helper) {
        var eve = component.getEvent("BoatSelect");
        console.log('component.get("v.boat.Id")>>>'+component.get("v.boat.Id"));
        eve.setParams({"boatId" : component.get("v.boat.Id")});
        eve.fire();
        var appeve = $A.get("e.c:BoatSelected");
        console.log('component.get("v.boat") Application eve fire'+component.get("v.boat"));
        appeve.setParams({"boat" : component.get("v.boat")});
        appeve.fire();
    }

BoatDetails.cmp

<aura:component access="global" implements="force:appHostable,flexipage:availableForAllPageTypes">
    
    <aura:handler event="c:BoatSelected" action="c.onBoatSelected" phase="capture"/>
    
    <aura:attribute name="boat" type="Boat__c" access="public"/>
    <aura:attribute name="id" type="Id" access="public"/>
    <aura:attribute name="boatError" type="String"/>
    
    <force:recordData aura:id="service" recordId="{!v.id}" targetFields="{!v.boat}" fields="Id,Name,Description__c,Price__c,
                    Length__c,Contact__r.Name,Contact__r.Email,Contact__r.HomePhone,BoatType__r.Name,Picture__c"
                      targetError="{!v.boatError}" recordUpdated="{!c.onRecordUpdated}"/>
    
    <lightning:tabset >
        <lightning:tab label="Details">
            <aura:if isTrue="{! !empty(v.boat)}">
            <c:BoatDetail boat="{!v.boat}"/>
            </aura:if>
        </lightning:tab>

        <lightning:tab label="Reviews">

            

        </lightning:tab>
        
        <lightning:tab label="Add Review">

            

        </lightning:tab>

    </lightning:tabset>

</aura:component>

BoatDetailsController.js

onBoatSelected : function(component, event, helper) {
        var boatvar = event.getParam("boat");
        console.log(boatvar.Id+'<<<<<<Application Eve Receiver boatVar');
        component.set("v.id",boatvar.Id);
        console.log(component.get("v.id")+'<<<<<<Application Eve Receiver boatVar');
        component.find("service").reloadRecord(true);
        for(var i=0;i<1000;i++)
            {
                
            }
        console.log(component.get("v.boat")+'<<<<<<Application Eve Receiver');
        
    },
    
    onRecordUpdated : function(component, event, helper) {
    }