onclick is not working in async function
Unanswered
Hutton's Vireo posted this in #help-forum
Hutton's VireoOP
export default async function Home() {
//https://api.bigcommerce.com/stores/xv5msk6z4r/v3/
const data = await getData();
// const data = await getData();
console.log(data);
return (
<div className="flex flex-wrap gap-5 p-10">
{data.map((ele, ix) => (
<div className=" w-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<button onClick={async()=> console.log(ele.name)}></button>
</div>
))}
</div>
);
}
//https://api.bigcommerce.com/stores/xv5msk6z4r/v3/
const data = await getData();
// const data = await getData();
console.log(data);
return (
<div className="flex flex-wrap gap-5 p-10">
{data.map((ele, ix) => (
<div className=" w-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<button onClick={async()=> console.log(ele.name)}></button>
</div>
))}
</div>
);
}
5 Replies
@Hutton's Vireo export default async function Home() {
//https://api.bigcommerce.com/stores/xv5msk6z4r/v3/
const data = await getData();
// const data = await getData();
console.log(data);
return (
<div className="flex flex-wrap gap-5 p-10">
{data.map((ele, ix) => (
<div className=" w-96 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<button onClick={async()=> console.log(ele.name)}></button>
</div>
))}
</div>
);
}
only server components can be async
server components do not support client-side event handlers such as onClick
server components do not support client-side event handlers such as onClick
Hutton's VireoOP
thn how to use onclick function i next js
@Hutton's Vireo thn how to use onclick function i next js
make a client component with the button, import it into the server async component
Hutton's VireoOP
can you please provide sample code
becouse i am new to nextjs
becouse i am new to nextjs
have you taken the https://nextjs.org/learn course?