#Set an Event Handler for React Component

2 messages · Page 1 of 1 (latest)

light osprey
#

Hello every one,

I have a question about client side reactivity with i.e React Components. I read the docs about this topic but there was a small (or niche) point missing to enlighten me.
The question is how can I pass i.e an Event Handler to a React Button Component.

in pure React this would in the easiest case look smth. like the following snippet if I'm not mistaken.

export function Home() {
  return (
    <div>
      ...
        <Button onClick={() => doSmth()} />
      ...
    </div>
  )
}

Through the Docs I learned that i cannot do something like this

---
---

<Button onClick={() => doSmth()} />

in an Astro Component beacause it will be rendered on the server and a function cannot be serialised and send to the client to be executed there.

Does anyone know how to achive something like this? Or maybe why I shouldn't do it and how smth similar could done better.

cursive blade
#

I just do it all inside of the React Component.