自動生成したボタン押下のイベントハンドラに引数を渡す

例えばTODOアプリで一覧を作成していて、行に対して削除ボタンを設置するような場合。ボタンを押下した時に行を特定する一意の情報を取得して、DELETEのリクエストなりを作成すると思います。

関数に引数を渡すのではなく、ボタン押下したイベントのオブジェクトを元に辿って情報を取得するようにしています。ボタンの属性(この例ではname) に一意のIDを設定して、イベントハンドラ側で取得してURLにつけてリクエストを送るような形です。

list.tsx

const handleDelete: MouseEventHandler<HTMLButtonElement> = (e) => {
  const response = fetch('<URL>' + e.currentTarget.name , {
    method: 'DELETE',
    headers: {'Content-Type': 'application/json'},
  })
}
・・・
{data.map((item, index) => (
  <button type="button" name={item.id} onClick={handleDelete} />
))}

HTML5以降はカスタム属性も生成できるので、nameなどは使わない方が良いかもしれませんが、これでやりたいことは実現できました。

ついでにNext.jsでDELETEのリクエストを受け取るAPIは以下のようにしています。
https://<ドメイン>/api/article/<articleid> というリクエストが来る想定で・・・

app/api/article/[articleid]/route.ts

import { auth } from "@/auth";
import { PrismaClient } from "@prisma/client";
import { NextRequest, NextResponse } from 'next/server';

const prisma = new PrismaClient()
export async function DELETE(req: NextRequest,{ params, }:  { params: Promise<{ articleid: string }> })  {

    const session = await auth()
    if (!session?.user) return NextResponse.json({ message: "Not authenticated" }, { status: 401 })

    const { articleid } = await params
    console.log("kore " + articleid)
    const deleteUser = await prisma.article.delete({
        where: {
            id: articleid,
            userId: session.user.id
        }
    })
    if (!deleteUser) return NextResponse.json({ message: "Not found" }, { status: 404 })

    return NextResponse.json("{}");
}

削除機能なのでリクエストがログイン済みかどうかを確認します。その後でパスパラメータから削除したい行を一意に特定するIDを取得して、セッション情報からuserIdを取得して、2つの情報が合致するDBのレコードを削除するようにしています。