+ Start a Discussion

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.

      <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"
            placeholder="All Types"
            onchange={handleSearchOptionChange} class="slds-align-middle">

import { LightningElement,wire,track } from 'lwc';
import getBoatTypes from "@salesforce/apex/BoatDataService.getBoatTypes";
export default class BoatSearchForm extends LightningElement {
    selectedBoatTypeId = '';
    // Private
    error = undefined; 
    // Needs explicit track due to nested data
    @track searchOptions;
    // Wire a custom Apex method
      boatTypes({ error, data }) {
      if (data) {
         // console.log('Dataloaded',data);
          this.searchOptions = data.map(type => {
              // TODO: complete the logic
            return {
        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;
      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 }      });

Appreciated your help.

AbhishekAbhishek (Salesforce Developers) 

For all the Trailhead issues please report it here,



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.

​​​​​​​Salesforce Support.
Issue resolved by changing the  value={selectedBoatTypeId} in lightning-combobox.
Juan Victoriano 7Juan Victoriano 7
// boatSearchForm.html

    <lightning-layout-item class="slds-align-middle">
      <lightning-combobox class="slds-align-middle"

// boatSearchForm.js

// imports
// import getBoatTypes from the BoatDataService => getBoatTypes method';
export default class BoatSearchForm extends LightningElement {
  selectedBoatTypeId = '';
  // Private
  error = undefined;
  // Wire a custom Apex method
    boatTypes({ error, data }) {
    if (data) {
      this.searchOptions = data.map(type => {
        // TODO: complete the logic
      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) {
    // Create the const searchEvent
    // searchEvent must be the new custom event search

// boatSearchForm.js-xml

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
Hello Naren9,

I'm also having difficulties with challenge #4, I ran into this error:
We can’t find the component boatSearchForm. Make sure the component was created according to the requirements.

Are you able to provide some insight? Anything would help.

-- Juan
Tanisha LaddhaTanisha Laddha
Hi Juan, Facing the same error, let me know how you resolved this.
Naresh A ConsumerNaresh A Consumer

Hi Juan/Tanisha,

I think you have missed to create the Lightning App Builder with boatSearchForm. Once it was created mentioned issue will be resolved
If the issue is resolved please mark Naren9 as best answer