how can I send a post request onClick in a client component when I can't add async functions?
Answered
Florida White posted this in #help-forum
Florida WhiteOP
Hey my app structure is like this:
page.tsx:
ClientComponent.tsx
error: No async functions in client components
page.tsx:
export default async function Page(props: props) {
// await db call
<ClientComponent data={data}/>
}ClientComponent.tsx
"use client"
export default function Something(props: props) {
async function callAPI(){
// await fetch yada yada
}
return(
<button onClick={callAPI}>Send</button>
)
}error: No async functions in client components
Answered by B33fb0n3
you can still use the inline variant like this:
<button onClick={async () => {
await someFunction()
}}></button>6 Replies
@Florida White Hey my app structure is like this:
page.tsx:
tsx
export default async function Page(props: props) {
// await db call
<ClientComponent data={data}/>
}
ClientComponent.tsx
tsx
"use client"
export default function Something(props: props) {
async function callAPI(){
// await fetch yada yada
}
return(
<button onClick={callAPI}>Send</button>
)
}
error: No async functions in client components
you can still use the inline variant like this:
<button onClick={async () => {
await someFunction()
}}></button>Answer
um, I'd rather split the function into a file mark "use server" at the top to avoid lots of headahces here
simplest example
@Lois simplest example
of course you can do that too
@B33fb0n3 you can still use the inline variant like this:
tsx
<button onClick={async () => {
await someFunction()
}}></button>
Florida WhiteOP
Oh thats interesting, didnt expect a solution like this LOL. Thanks If i run into any quirks i’ll bite the bullet and move the component to a server one
happy to help