Unable to use :key in JSX

[dullkingsman]

I am using JSX with typed-html to generate static markup and send to the client. I am using Alpine on the client for a bit of interactivity. However, I was not able to use @click and :key. I was able to find @click by replacing @ with x-on, but anything that contains a : is not allowed and I am unable to by bass it and I could not find any x-on equivalent alternative. Is there anything I can do?

[ekwoka]

This is not an Alpine issue.

You need to extend the JSX interface to provide additional attributes to the element interface.

technically, :key is just x-bind:key as a special case

[Pyakz]

Hi how did you figure out the modifiers?

I am using JSX with typed-html on Hono (Bun)

for now i am wrapping it on html`` if some bindings causes error

[believelody]

The easiest workaround is to use props as spread object.
For instance, if you want to use "@click.away" you can do this:

<div {...{ "@click.away": "yourfunction()" }}>...</div>

Currently, JSX doesn't support most of alpinejs attributes because of some characters not allowed 😕