0

I have a requirement wherein I have to convert an existing aura component to Lightning Web Component. Although, I have no experience working with Lightning at all, I got started with it to understand LWC better.

I'm writing a part of the component wherein I have to display a list of error messages on the screen and then based on the error selected, I need to point/focus on the specific field(that should be in another component). So, I started by writing a simple js and html markup to display predefined list of messages and it gives me the following error when I add the component to the app page:

afterRender threw an error in 'c:lwcErrorsListComp' [Cannot read property 'error' of undefined]

HTML markup:

<template>
    <lightning-card title="Erros List" icon-name="custom:custom3">
        <div class="slds-m-around_medium">
            <template if:true={errorList}>
                <ul>
                    <template for:each={errorList} for:item='objError'>
                        <li key={objError.Id}>
                            <a id={objError.Id} type={objError.type} class="slds-text-link_reset"></a>
                            <lightning-icon icon-name="utility:jump_to_bottom" size="xx-small" class="slds-p-right_small" alternative-text={objError.error}></lightning-icon>
                            {error.error}
                        </li>
                    </template>
                </ul>
            </template>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement , track} from 'lwc';

export default class LwcErrorsListComp extends LightningElement {
    @track errorList =[
        {
            id:"input-text" ,
            type:"",
            error:"Name is compulsary"
        },
        {
            id:"input-checkbox" ,
            type:"",
            error:"Checkbox is compulsary"
        },
        {
            id:"input-password" ,
            type:"",
            error:"Password is compulsary"
        },
        {
            id:"input-radio" ,
            type:"",
            error:"Single radio is compulsary"
        },
        {
            id:"input-toggle" ,
            type:"toggle",
            error:"Toggle is compulsary"
        },
        {
            id:"select" ,
            type:"",
            error:"Select is compulsary"
        },
        {
            id:"textarea" ,
            type:"textarea",
            error:"Textarea is compulsary"
        },
        {
            id:'checkboxGroup',
            type:'checkbox-group',
            error:"Checkbox group is compulsary"
        },
        {
            id:'radioButtonGroup',
            type:'radiobutton-group',
            error:"Radiobutton group is compulsary"
        }
    ];
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata" fqn="lwcErrorsListComp">
    <apiVersion>45.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    </targets>
</LightningComponentBundle>

Can someone please help me understand what's wrong here?

  • Handle Component Errors ? – glls Jul 17 at 17:59
  • it would seem that {error.error} is the culprit, since you are using objError – glls Jul 17 at 18:03
0

based on your template:

<template for:each={errorList} for:item='objError'>
                        <li key={objError.Id}>
                            <a id={objError.Id} type={objError.type} class="slds-text-link_reset"></a>
                            <lightning-icon icon-name="utility:jump_to_bottom" size="xx-small" class="slds-p-right_small" alternative-text={objError.error}></lightning-icon>
                            {error.error} <--HERE!!
                        </li>
                    </template>

It would seem that {error.error} is the culprit, since you are using objError

  • thanks for pointing that out.. I changed the item from 'error' to 'objError' to have more clarity. Such foolish of me to miss that. – Ashutosh Arora Jul 17 at 18:08

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.