import Link from "next/link";
export default async function ListItem({ data }) {
return (
<div>
{data.map((a, i) => {
return (
<div key={i} className="list-item">
<Link key={i} href={`/detail/${a._id}`}>
<h4>{a.title}</h4>
<p>{a.content}</p>
</Link>
<Link href={`/edit/${a._id}`}>✏️</Link>
<span
onClick={() => {
fetch("/api/delete/delete", {
method: "DELETE",
body: `${data[i]._id}`,
});
}}>
🗑️
</span>
</div>
);
})}
<button className="writeBtn">
<Link href={`/write`}>+</Link>
</button>
</div>
);
}
삭제하기 기능 만드는데
<span
onClick={() => {
fetch("/api/delete/delete", {
method: "DELETE",
body: `${data[i]._id}`,
});
}}>
🗑️
</span>
span테그에 onclick에 fetch를 넣었더니
Unhandled Runtime Error
Error: Event handlers cannot be passed to Client Component props. <span onClick={function} children="🗑️"> ^^^^^^^^^^ If you need interactivity, consider converting part of this to a Client Component.
이런 오류가 나는데요.
삭제 버튼은 클라이언트 컴포넌트로 만들어서 추가해야될까요?
