CODEWITHSUNDEEP
stenciljs
Nathan Tregillus
Nathan Tregillus

Reputation: 6344

Stencil JSX listener throwing exception

I am trying to use JSX event listening strategy as describe here: https://stenciljs.com/docs/events#using-events-in-jsx

however, when I set up my event listener in my JSX i get the following error:

Type '{ ref: (el: HTMLElement) => ISubflow; onButtonStateChange:
(ev: CustomEvent<ButtonState>) => void; }' is not assignable to type
 'MyComponentAttributes'. Property 'onButtonStateChange' does
 not exist on type 'MyComponentAttributes'.

MyComponent has this event definition:

@Event() onButtonStateChange: EventEmitter<ButtonState>;

and the JSX looks like this:

<my-component
            ref={(el)=> this.currentSubflow = (el as unknown) as ISubflow}
            onButtonStateChange={(ev:CustomEvent<ButtonState>) => this.onButtonStateChanged(ev)} />

Upvotes: 0

Views: 91

Answers (1)

Nathan Tregillus
Nathan Tregillus

Reputation: 6344

Oh man, this is a sneaky one~!

JSX eventing follows a naming convention! All I had to do was change 

@Event() onButtonStateChange: EventEmitter<ButtonState>;

to 

@Event() buttonStateChange: EventEmitter<ButtonState>;

and the Sencil/JSX stuff prepends the on to the event to listen for it!

Upvotes: 3

Related Questions