+ Start a Discussion
Naren9Naren9 

Lightning Web Components SuperBadge - Challenge 4

Hi All,
Getting below error on Lightning Web Components SuperBadge at Step 4.All the Boat Types are displaying in dropdown and when I choose different Boat Types, results are showing. 
Challenge Not yet complete... here's what's wrong:
We can’t find the correct settings set for the lightning-combobox in the component boatSearchForm HTML. Check that the component was created according to the requirements, including the correct function for the onchange event, correct options, and values, using the correct case sensitivity.

boarSearchForm.html
-------------------------------
<template>
  <lightning-card>
      <lightning-layout horizontal-align="center" vertical-align="end">
      <lightning-layout-item class="slds-align-middle" padding="horizontal-medium">
          <lightning-combobox variant="label-hidden"
            label="Boat Type"
            value={value}
            placeholder="All Types"
            options={searchOptions}
            onchange={handleSearchOptionChange} class="slds-align-middle">
          </lightning-combobox>
      </lightning-layout-item>
    </lightning-layout>
  </lightning-card>
</template>

boatSearchForm.js
---------------------------
import { LightningElement,wire,track } from 'lwc';
import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";
export default class BoatSearchForm extends LightningElement {
    selectedBoatTypeId = '';
    value='';
    // Private
    error = undefined; 
   
    // Needs explicit track due to nested data
    @track searchOptions;
    label;
    //value;
    
    // Wire a custom Apex method
    @wire(getBoatTypes)
      boatTypes({ error, data }) {
      if (data) {
         // console.log('Dataloaded',data);
          this.searchOptions = data.map(type => {
              // TODO: complete the logic
            return {
                label:type.Name,
                value:type.Id
            }     
           
         
        });      
        this.searchOptions.unshift({ label: 'All Types', value: '' });
      } else if (error) {
        this.searchOptions = undefined;
        this.error = error;
      }
    }
    
    // Fires event that the search option has changed.
    // passes boatTypeId (value of this.selectedBoatTypeId) in the detail
    handleSearchOptionChange(event) {
      //  event.preventDefault();
      // Create the const searchEvent
      //const boatTypeId=event.detail.value;
      this.selectedBoatTypeId=event.detail.value;
      console.log('Selected Boat Type Id', this.selectedBoatTypeId);
      // searchEvent must be the new custom event search
      const searchEvent= new CustomEvent('search',{detail:this.selectedBoatTypeId});
     // const searchEvent = new CustomEvent('search', {        detail: { boatTypeId: this.selectedBoatTypeId }      });
      this.dispatchEvent(searchEvent);
    }
}

Appreciated your help.

Thanks,
Naren
AbhishekAbhishek (Salesforce Developers) 
Hi,

For all the Trailhead issues please report it here,

https://trailhead.salesforce.com/help?support=home#

https://trailhead.salesforce.com/help

So that our trailhead support engineers will look into it and get back to you.

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Regards,
​​​​​​​Salesforce Support.
Naren9Naren9
Issue resolved by changing the  value={selectedBoatTypeId} in lightning-combobox.