AWS Amplifyチュートリアルを終えて：編集機能を追加する際に、TODOが削除されてしまう問題の対処

はじめに

AWS Amplifyに触っておきたいなと思いまして、チュートリアルを終えました。
チュートリアルに従い、Next.jsを使い、追加・削除ができるTODOサービスを開発しました。
その後、TODOの編集機能を追加しました。

• リポジトリ

編集機能を追加する際に、TODOが削除されてしまう問題の対処

これは、AWS Amplifyの問題ではなくフロントエンドのバグです。
表示されているTODO要素の中に編集ボタンを設置しました。しかし、ボタンをクリックし編集を終えると、TODOが消えてしまいました。

以下、当時のソースコードから、TODOの要素を生成するJSXを抜粋します。

{todos.map((todo) => (
    <li
        onClick={() => deleteTodo(todo.id)}
        key={todo.id}
    >
        {todo.content}
        <button onClick={
            () => {
                editTodo(todo.id)
            }}>Edit</button>
    </li>
))}

お分かりいただけたと思いますが、編集ボタンの上位のliのonClickにdeleteTodo処理が含まれています。
その結果、editTodoの後にdeleteTodoが実行されてしまい、TODOを編集すると削除されてしまうのでした。

このチュートリアルを終えた後、編集ボタンを追加する記事が多く見受けられましたが、注意が必要です。
正しくは下記の通りですね。

{todos.map((todo) => (
    <li
        key={todo.id}
    >
    {todo.content}

    <button onClick={
        () => {
            editTodo(todo.id)
        }}
    >Edit</button>

    <button onClick={
        () => deleteTodo(todo.id)
    }
    >Delete</button>
    </li>
))}

※style属性は省略

削除ボタンも追加する必要がありました。

おわり

AWS Amplifyチュートリアルを終え、編集ボタンを設置する際の注意点を説明しました。