#Pass onClick from Astro to a React component

3 messages · Page 1 of 1 (latest)

ocean ravine
#

I have this Button that accept onClick prop

const Button = ({ onClick }) => {
  return <button onClick />
}

The question is, is it possible to pass onClick from Astro to that Button component?
Something like this

---
import Button from "./Button";
---

<Button 
  onClick={() => {
    console.log("OH HEY");
  }}
  client:load
/>

I tried it and don't seem to work, the only way to do it is create a React component that pass the onClick, then use it in the astro component. I find it a little inconvenient.

devout tartan
#

The little yellow hint/warning in that section gives you some more info about it 🙂

What are your goals for needing to pass this function as props?
Perhaps we can help you come up with an alternative solution 👍