0

I am stuck on this error.

[Cannot read properties of undefined (reading 'Name')]

Please refer to the screenshot below.

enter image description here

enter image description here

I checked my boatSearchForm.js and getBoatTypes is imported.

Can someone enlighten me on how to solve this problem?

import { LightningElement, api } from 'lwc';
const TILE_WRAPPER_SELECTED_CLASS = 'tile-wrapper selected';
const TILE_WRAPPER_UNSELECTED_CLASS = 'tile-wrapper';

export default class BoatTile extends LightningElement {
    @api boat;
    @api selectedBoatId;
    
    // Getter for dynamically setting the background image for the picture
    get backgroundStyle() {
        return `background-image:url(${this.boat.Picture__c})`;
     }
    
    // Getter for dynamically setting the tile class based on whether the
    // current boat is selected
    get tileClass() { 
        // return this.selectedBoatId == this.boatId ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
        return this.selectedBoatId ? TILE_WRAPPER_SELECTED_CLASS : TILE_WRAPPER_UNSELECTED_CLASS;
    }
    
    // Fires event with the Id of the boat that has been selected.
    selectBoat() { 
        const boatselectEvent = new CustomEvent('boatselect', { 
            detail: { boatId : this.boat.id}
        });
        this.dispatchEvent(boatselectEvent);
    }
}
5
  • can you pls provide at least the boteTile.js
    – Damecek
    Mar 4, 2022 at 12:33
  • Hi @Damecek, I added the tiles.js Mar 4, 2022 at 12:40
  • the error basically means that some variable is undefined but you are trying to access the Name attribute of this object.
    – Damecek
    Mar 4, 2022 at 12:56
  • in the boatTile.js I don't see you would be accessing the Name property, so it is probably somewhere else in your app. Probably if you are getting the boat record from database, please ensure that you really receive some records. for example the @wire adapter is firing multiple times before returning any data.
    – Damecek
    Mar 4, 2022 at 12:58
  • your boatTile html file. are you iterating over your boats and trying to access the Name property? you should add an if:true directive to verify the property is not undefined if this is the case
    – glls
    Mar 4, 2022 at 13:51

1 Answer 1

2

I think you must have some markup like this in your html file:

{boat.BoatType__r.Name}

Instead you should validate if boat.BoatType__r is not null or undefined

<template if:true={boat}>
    <template if:true={boat.BoatType__r}>
        {boat.BoatType__r.Name}
    </template>
</template>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .