getting this error

Challenge Not yet complete... here's what's wrong: 
The BoatReviews component doesn't have an event handler registered with aura:handler that reloads data from Apex any time the value of the component’s boat attribute is changed.

do i need more than this

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:method name="refresh" action="{!c.doInit}" />
    <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>

onBoatSelected : function(component, event, helper) {
        
        var boat = event.getParam("boat");
        //console.log("----->"+boat)
        component.set("v.boat",boat);

 

i am receiveing this error

This page has an error. You might just need to refresh it. Unable to find action 'getBoatTypes' on the controller of c:BoatSearchForm Failing descriptor: {c:BoatSearchForm}

here are the relative components

boatSearchForm.cmp

<aura:component controller="BoatSearchFormApexController" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    
    <aura:attribute name="selectType_boat_attribute" type="String[]" default="All Types"/>
    <aura:attribute name="newBtnShow" type="boolean"/>
    
    <aura:registerEvent name="startBoatForm" type="c:startBoatForm"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:handler name="startBoatForm" event="c:startBoatForm" action="{!c.handleBoatForm}"/>
    
    
    <lightning:layout horizontalAlign="center" VerticalAlign="end">
        
        <lightning:layoutItem flexibility="auto" padding="around-small"> 
            <lightning:select aura:id="selectTypeBoat"  name="selectType" label="">
                <option value="">All Types</option>
                <aura:iteration items="{!v.selectType_Boat_attribute}" var="option">
                    <option value="!option" text="!option"/>
                </aura:iteration>
            </lightning:select>
        </lightning:layoutItem>
    
        <lightning:layoutItem flexibility="auto" padding="around-large">
            <lightning:button label="search" variant="brand" onclick="{!c.boatSearch}"/>
        </lightning:layoutItem>
        
        <aura:if isTrue="{!v.newBtnShow}">
        <lightning:layoutItem flexibility="auto" padding="around-large">
            <lightning:button label="new" variant="neutral" onclick="{!c.newBtnClick}"/>
        </lightning:layoutItem>
        </aura:if>
      
    </lightning:layout>
    
</aura:component>


boatSearchFormController.js

({
    doInit : function(component, event, helper) {
          alert('---->');
        var action = component.get("c.getBoatTypes");
        action = setCallback(this, function(response){
            var state = response.getState;
            $A.log(response);
            if(state === "success"){
                component.set("v.selectType_boat_attribute", response.getReturnValue());
            }
        });
        $A.enqueueAction(action);
        var isEnabled = component.get("e.force:createRecord");
          //check if isEnabled is true
          if (isEnabled) {
            component.set("v.newBtnShow", true);
          }
        
    }
})


boatSearchFormApexController.apxc

public with sharing class BoatSearchFormApexController 
{
    public static list<BoatType__c> getBoatTypes()
    {
         return [Select Id, Name from BoatType__c];
    }
}


boatSearch.cmp

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <lightning:card class="slds-m-bottom_x-small" title="Find a Boat">
        <c:BoatSearchForm/>
    </lightning:card>
    
    <lightning:card class="slds-m-bottom_x-small" title="Matching Boats">
        <c:BoatSearchResults/>
    </lightning:card>
</aura:component>


FriendsWithBoats.app

<aura:application extends="force:slds">
    <c:BoatSearch/>
</aura:application>


 

so I have been trying to teach myself how to construct lightning components by putting things from trailhead and other pages to practice but im not sure what im missing to be able to see any styling or formatting i have even tried copying things straight from https://developer.salesforce.com/docs/component-library/bundle/ just to see how it should work and look. Can anyone tell me what im doing wrong or what I am missing or if it's broken how can i fix it. Without seeing it first hand and moving things around myself I will have trouble knowing what im doing.

component code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <p>start component</p>
    <aura:attribute name='name' type='String' Default='Pearson'>    
    </aura:attribute>
    <p>>Naeem {!v.name}</p>
    <p>
        figure out what i am making
        form
        figure out what is needed for a form
        title
    </p>
    <div class="c-container">
    <lightning:card title='first card' >
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <h1 class="slds-text-heading_large">This is the Title</h1>
            </lightning:layoutItem>
       </lightning:layout> 
        
        <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu">
            <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
            <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
            <lightning:menuItem value="MenuItemThree" label="Menu Item Three" disabled="true" />
            <lightning:menuItem value="MenuItemFour" label="Menu Item Four" />
        </lightning:buttonMenu>
        
        <lightning:input lable='name' name='InputName'>
        </lightning:input>
        <lightning:formattedname
         firstName='{!v.InputName}'
         lastName='{!v.name}'                        
         />
       <p> 
        title styling
            css
                header class
    block for the form
        card
            card needs 
                open and close blocks for card
            
    fields for the form
        use attuributes above the form to define the fields
        use lightning input to create fields on the form using the attribute to assign the values that have been put in
    
    a button
        </p>
    </lightning:card>
    </div>
    <aura:attribute name="headerTitle" type="Aura.Component[]">
        <h2>
            <b>Watchlist (0)</b>
        </h2>
    </aura:attribute>
    
    <lightning:card footer="Card Footer" title="Hello">
        <aura:set attribute="actions">
            <lightning:button label="New"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>
    
    <lightning:card variant="Narrow" title="Narrow Card Header" iconName="standard:account" footer="Card Footer">
        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>

    <lightning:card class="slds-text-heading_small" 
        title="{!v.headerTitle}" iconName="utility:broadcast">
        <aura:set attribute="actions">
            <lightning:buttonMenu iconSize="x-small" menuAlignment="right">
                <lightning:menuItem label="Open Watchlist app" value="Open" />
                <lightning:menuItem label="Add to Watchlist app" value="Add" />
            </lightning:buttonMenu>
        </aura:set>
    </lightning:card>



    <div class="c-container">
        <lightning:layout >
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 1">Field 1</p>
                    <p>Name</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field2 (3)">Field 2 (3)
                        <lightning:buttonIcon iconName="utility:down" variant="border-filled" size="small" alternativeText="More Actions" />
                    </p>
                    <p>Eligibltiy</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 3">Field 3</p>
                    <a href="#">Website</a>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 4">Field 4</p>
                    <p>
                        <span title="">Address</span>
                    </p>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
 

I have used dataloader app and dataloader.io to map everything out and can see all the information that different posts say that i should have mapped out on my org and still i still get this error
Challenge Not yet complete... here's what's wrong: 
Please check that all of the relationships are maintained for Opportunity Contacts and Adventure Packages that you upload from the spreadsheet.
ive even manually mapped the contact roles and adventure package with the data loader app and still Got the same error
even though through that way I still got the same error
I have no idea what i am doing wrong

getting this error

Challenge Not yet complete... here's what's wrong: 
The BoatReviews component doesn't have an event handler registered with aura:handler that reloads data from Apex any time the value of the component’s boat attribute is changed.

do i need more than this

    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <aura:method name="refresh" action="{!c.doInit}" />
    <aura:handler event="c:BoatSelected" action="{!c.onBoatSelected}"/>

onBoatSelected : function(component, event, helper) {
        
        var boat = event.getParam("boat");
        //console.log("----->"+boat)
        component.set("v.boat",boat);

 

so I have been trying to teach myself how to construct lightning components by putting things from trailhead and other pages to practice but im not sure what im missing to be able to see any styling or formatting i have even tried copying things straight from https://developer.salesforce.com/docs/component-library/bundle/ just to see how it should work and look. Can anyone tell me what im doing wrong or what I am missing or if it's broken how can i fix it. Without seeing it first hand and moving things around myself I will have trouble knowing what im doing.

component code
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    <p>start component</p>
    <aura:attribute name='name' type='String' Default='Pearson'>    
    </aura:attribute>
    <p>>Naeem {!v.name}</p>
    <p>
        figure out what i am making
        form
        figure out what is needed for a form
        title
    </p>
    <div class="c-container">
    <lightning:card title='first card' >
        <lightning:layout horizontalAlign="space">
            <lightning:layoutItem flexibility="auto" padding="around-small">
                <h1 class="slds-text-heading_large">This is the Title</h1>
            </lightning:layoutItem>
       </lightning:layout> 
        
        <lightning:buttonMenu aura:id="menu" onselect="{! c.handleSelect }" alternativeText="Show menu">
            <lightning:menuItem value="MenuItemOne" label="Menu Item One" />
            <lightning:menuItem value="MenuItemTwo" label="Menu Item Two" />
            <lightning:menuItem value="MenuItemThree" label="Menu Item Three" disabled="true" />
            <lightning:menuItem value="MenuItemFour" label="Menu Item Four" />
        </lightning:buttonMenu>
        
        <lightning:input lable='name' name='InputName'>
        </lightning:input>
        <lightning:formattedname
         firstName='{!v.InputName}'
         lastName='{!v.name}'                        
         />
       <p> 
        title styling
            css
                header class
    block for the form
        card
            card needs 
                open and close blocks for card
            
    fields for the form
        use attuributes above the form to define the fields
        use lightning input to create fields on the form using the attribute to assign the values that have been put in
    
    a button
        </p>
    </lightning:card>
    </div>
    <aura:attribute name="headerTitle" type="Aura.Component[]">
        <h2>
            <b>Watchlist (0)</b>
        </h2>
    </aura:attribute>
    
    <lightning:card footer="Card Footer" title="Hello">
        <aura:set attribute="actions">
            <lightning:button label="New"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>
    
    <lightning:card variant="Narrow" title="Narrow Card Header" iconName="standard:account" footer="Card Footer">
        <aura:set attribute="actions">
            <lightning:buttonIcon iconName="utility:down" variant="border-filled" alternativeText="Show More"/>
        </aura:set>
        <p class="slds-p-horizontal_small">
            Card Body (custom component)
        </p>
    </lightning:card>

    <lightning:card class="slds-text-heading_small" 
        title="{!v.headerTitle}" iconName="utility:broadcast">
        <aura:set attribute="actions">
            <lightning:buttonMenu iconSize="x-small" menuAlignment="right">
                <lightning:menuItem label="Open Watchlist app" value="Open" />
                <lightning:menuItem label="Add to Watchlist app" value="Add" />
            </lightning:buttonMenu>
        </aura:set>
    </lightning:card>



    <div class="c-container">
        <lightning:layout >
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 1">Field 1</p>
                    <p>Name</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field2 (3)">Field 2 (3)
                        <lightning:buttonIcon iconName="utility:down" variant="border-filled" size="small" alternativeText="More Actions" />
                    </p>
                    <p>Eligibltiy</p>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 3">Field 3</p>
                    <a href="#">Website</a>
                </div>
            </lightning:layoutItem>
            <lightning:layoutItem padding="around-small">
                <div class="header-column">
                    <p class="field-title" title="Field 4">Field 4</p>
                    <p>
                        <span title="">Address</span>
                    </p>
                </div>
            </lightning:layoutItem>
        </lightning:layout>
    </div>
</aura:component>
 

The following won't validate, but won't pass the validation in this trail.  Quantity field is howver using the correct field.  Thoughts?



<aura:component>

<aura:attribute name="item" type="Camping_Item__c" required="true"/>    
    <ui:outputText value="{!v.item.Name}"/>
    <ui:outputCheckbox value="{!v.item.Packed__c}"/>
    <ui:outputCurrency value="{!v.item.Price__c}"/>
      <ui:outputNumber value="{!v.item.Quantity}"/>
            
</aura:component>