[SalesForce] afterRender threw an error in ‘c:lwcErrorsListComp’ [Cannot read property ‘error’ of undefined] Lightning web components

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?

Best Answer

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

Related Topic