+ Start a Discussion

need help with Lightning Component Framework Specialist superbadge step 2

I have created the following components for this step:

<aura:component controller="BoatSearchForm" implements="force:appHostable,flexipage:availableForAllPageTypes"  access="global" >
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    <aura:attribute name="searchOptions" type='String[]' default='All'/>
    <aura:attribute name='searchOptionToIdMap' type='Map' default="{All:''}" />
    <aura:attribute name='showNewButton' type='Boolean' default='false'/>

    <lightning:layout horizontalAlign="center"   >

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 

           <lightning:select aura:id='typeSelect' name='selectItem' onchange=''>
             <aura:iteration items='{!v.searchOptions}' var='option'>
                 <option value='{!option}' text='{!option}'></option>

       <lightning:layoutItem class="slds-grid_vertical-align-center" > 
         <lightning:button label="Search" variant="brand"  />
         <aura:if isTrue='{!v.showNewButton}'>
            <lightning:button variant='neutral' label='New' onclick='{!c.createBoat}'/>



     doInit: function(component) 
       console.log('inside do init '); 
       var action=component.get('c.getSearchOptions');
             var state = response.getState();
             if (state === "SUCCESS")
                 console.log('inside success state');
                 var custs = [];
                 var conts = response.getReturnValue();
                 for(var key in conts)
                    console.log('populated list');
                     custs.push({value:conts[key], key:key});
                 component.set("v.searchOptions", custs);
     createBoat: function (component) 
            console.log('inside controller');
            var createRecordEvent = $A.get('e.force:createRecord');
            if (createRecordEvent) 
                    var typeName = component.find('typeSelect').get('v.value');
                    var typeMap = component.get('v.searchOptionToIdMap');
                    var typeId = null;
                    if (typeName && typeMap && typeMap[typeName]) 
                            typeId = typeMap[typeName];
                        'entityApiName': 'Boat__c',
                        'defaultFieldValues': {
                            'BoatType__c': typeId
    renderNewButton: function (component) {
    var createRecordEvent = $A.get('e.force:createRecord');
    if (createRecordEvent) {
        component.set('v.showNewButton', true);

Apex Controller:
public with sharing class BoatSearchForm
        public static Map<String, String> getSearchOptions() 
                List<BoatType__c> boatTypes = [SELECT Id, Name FROM BoatType__c LIMIT 400];
                Map<String, String> returnMap = new Map<String, String>();
                        for(BoatType__c bt: boatTypes)
                            returnMap.put(bt.Name, bt.Id);
                return returnMap;
<aura:application extends="force:slds">
    <lightning:layout >
                 <lightning:card title="Find a Boat" class="slds-m-top_10px" >
                          <c:BoatSearchForm />


Whenever I try to load my app I get this error:
User-added image

Something is wrong with my component. I am not able to identify it. Can anyone help me with this?
Chidanand MChidanand M
I am also experiencing the same isuue. 
Pratik BansodPratik Bansod
Scratched my head a lot on this!! Please add lable in <lightning:select> tag of the lightning component.
<lightning:select aura:id='typeSelect' label="Please select"  name='selectItem' onchange=''>
It worked for me. Please mark as best answer if the issue is resolved!!!
@jeronimoburgers ☁@jeronimoburgers ☁
@shashi, this forum should be considered to provide help, hints and tips. Not complete solutions. Trailhead and Superbadges in particular should be a learning experience, not a copy & paste excercise. 
shashi kumar 58shashi kumar 58
Kamesh SinghKamesh Singh
Hi @shashi kumar 58, I am stuck with this superbadge step 2.
Can you please help me?
Manish Anand 22Manish Anand 22
Hi All,

I am stuck in challenge 2. Functionality is working as expected. But I get error as - Challenge Not yet complete... here's what's wrong: 
The BoatSearch component should instantiate the BoatSearchForm and BoatSearchResults components.

Below is my BoatSearch component.
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" >
    <lightning:card title="Find a Boat"  class="slds-m-top_10px">
    <lightning:card title="Matching Boats">

Any lead is appreciated.

pankaj singla 39pankaj singla 39
@Manish Anand
You have used dot(.) to initialise the components rather than colon(:). Use the below code to initialize the components
<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes" access="global" > <lightning:card title="Find a Boat" class="slds-m-top_10px"> <c:BoatSearchForm/> </lightning:card> <lightning:card title="Matching Boats"> <c:BoatSearchResults/> </lightning:card> </aura:component>