3

I'm trying to implement a small use case of CustomEvent() in lwc and it's not working. I have implemented custom events in past and I'm not sure what I missed here.

Child Comp:

HTML:

<template>
    <lightning-card title="Child">
        <div class="child">
            <button class="slds-button slds-button_brand" onclick={handleClick}>Click Me!! </button>
        </div>
    </lightning-card>
</template>

JS:

import { LightningElement } from 'lwc';

export default class ChildCompDispatch extends LightningElement {
    sGreetingToParent = 'Hello, Welcome to Events!! ';
    handleClick(){
        const pressedEvent = new CustomEvent('press',{detail : this.sGreetingToParent});
        this.dispatchEvent(pressedEvent);
    }
}

Parent Component

HTML

<template>
    <lightning-card title ="Parent">
        <div class="Parent" if:true={bShowGreeting}>
            <p ><b>{sGreeting}</b></p>
        </div>
        <div>
            <c-child-comp-dispatch onpress={showgreeting}></c-child-comp-dispatch>
        </div>
    </lightning-card>
</template>

JS

import { LightningElement } from 'lwc';

export default class ParentCompHandle extends LightningElement {
    bShowGreeting = false;
    sGreeting = '';
    showGreeting(event){
        this.bShowGreeting = true;
        this.sGreeting = event.target.detail;
    }
}

It's a pretty simple and straight-forward component. Not sure what's missing here. Anyone?

3

for your event there is no event.target so you are receiving this error. You should instead change to event.detail and use your detail. I would suggest restructuring the event that you are sending however to be:

this.dispatchEvent( new CustomEvent( 'press', { detail: { value: this.sGreetingToParent }} )

and then access it in your method by getting event.detail.value as you have now set this with a key for the attribute that you wish to receive. just assigning event.detail with the value will set detail to an object and the key would not exist for what you wish to receive.

also as mentioned in another response here, you should make sure that your javascript expressions match the case for their usage:

showGreeting is not the same as showgreeting. Javascript being case sensitive, you will want to have your onpress={showGreeting}

You may also consider some checks in place too in your method that shows the greeting, there are two ways to do it. One is new, one is old.

Old:

this.sGreeting = ( event && event.detail && event.detail.value ) || '';

New: (not as widely supported in all browsers yet)

this.sGreeting = event?.detail && event?.detail?.value
| improve this answer | |
2

Looks like there is small typo in your parent component when you handle the event

Change the code to below , notice i have showGreeting instead of showgreeting

<c-child-comp-dispatch onpress={showGreeting}></c-child-comp-dispatch>
| improve this answer | |

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.