1

I am trying to return some data from a wrapper class into my LWC component but keep getting errors whatever I try.

Whenever I load the page, I get property 'icon' undefined.

Here is my current code:

HTML

<template>
{recordType.icon}
<template>

JS

import { LightningElement, api, wire } from 'lwc';
import getRecordType from '@salesforce/apex/ChatterUtils.getRecordType';

export default class ChatterPost extends LightningElement {
    @api post;
    recordType;

    @wire(getRecordType, {recordId: '$post.Id'})
    retrieveType(result) {
        this.recordType = result.data;
    }

}

Apex

@AuraEnabled(Cacheable=true)
public static CustomWrapper getRecordType(Id recordId) {
    CustomWrapper cw = new CustomWrapper();
    cw.icon = 'dummy-icon';
    cw.styleClass = 'dummy-class';
    return cw;
}

public class CustomWrapper {
    @AuraEnabled
    public String icon {get; set;}
    @AuraEnabled
    public String styleClass {get; set;}

    public CustomWrapper() {
        this.icon = 'default-icon';
        this.styleClass = 'default-style';
    }

}
3
  • Where have you defined recordType ? Commented Apr 28, 2020 at 2:34
  • Sorry this was missing in pasted code, I’ve updated the original post. The issue still stands. Commented Apr 28, 2020 at 2:39
  • what do you see the value of this.recordType in the console.log , after you have assigned result.data to it ? Commented Apr 28, 2020 at 3:33

1 Answer 1

0

When html is rendered initially, result is {} , and you are trying to set the property of null (result.data) to recordType. You need to put a check , when result is loaded , then only set this property. Update your code as below

@wire(getRecordType, {recordId: '$post.Id'})
retrieveType(result)  {
    if(result.data) {
    this.recordType = result.data;
    }
}

Also set the value of recordType=''; initially.

Refer this link as well for your other question Why does my hasResults getter not work?

Couple of other issues , I see :- Were you able to save the apex class? I see you have used cw.class = 'dummy-class'; but in the wrapper class you have used - this.styleClass = 'default-style'; change either of these and make same property .

Use closing tag for template in the html file.

3
  • Thanks Manish, I noticed using recordType; didn't work, but when I used recordType = '';, it did. Is there a reason for this? I don't really get why setting it as an empty string works but just initialising it doesn't. Commented Apr 28, 2020 at 12:41
  • Re: apex class, this was another issue with the pasted code. I have rectified. Commented Apr 28, 2020 at 12:42
  • 1
    recordType = '' ; it means recordType is null and null is a type of Object in Javascript. recordType; , it means recordType is undefined. You can access the property of an object (null) in this case but not of undefined. Here is another link of your question which has almost same explanation - salesforce.stackexchange.com/questions/304025/… Commented Apr 28, 2020 at 12:45

You must log in to answer this question.

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