Use "onClick" in server component
Answered
neon posted this in #help-forum
neonOP
Is there a way to call a function (that updates my database) when a button is clicked, but inside a server component? Maybe I can use some server actions magic?
9 Replies
@neon Is there a way to call a function (that updates my database) when a button is clicked, but inside a server component? Maybe I can use some server actions magic?
wrap your button in form.
do note: that client components are not a deoptimization. why would you want to create a onClick with server component?
return (
<form>
<button handleAction={async () => {
"use server"
console.log("This is printed in the server")
}}>Do something</button>
</form>
)do note: that client components are not a deoptimization. why would you want to create a onClick with server component?
@ᴉuɐpɹɐɐ wrap your button in form.
tsx
return (
<form>
<button handleAction={async () => {
"use server"
console.log("This is printed in the server")
}}>Do something</button>
</form>
)
do note: that client components are not a deoptimization. why would you want to create a onClick with server component?
neonOP
I make async fetches to the database in the same component as my button, and I can't use async functions inside client components, right?
you can use async function inside client components
neonOP
really?
yep
just need to know how to
neonOP
Can you teach please?
Answer
neonOP
ty