【React】Todoリストのタスク削除後のID番号を振り直すようにしたい

Question

Reactで、Todoリストを作成しています。
Todoリストの削除ボタンを押したら、タスク削除後、タスクのIDの番号が振り直される機能を実装したいです。

色々調べて実装したのですが、これ以上積んでわからない状態です。
何方かアドバイスをお願いします。

#####現在の状況
Todoリストの削除ボタンを押したら、タスク削除後、タスクのID番号は振り直されることなく、追加した時の番号が表示される。

import { useState } from "react";

//入力用 todos
//未完了のTodo用 comment

function App() {
  const [todos, setTodos] = useState([]);
  const [comment, setComment] = useState("");

  const onChangeTodo = (e) => {
    setComment(e.target.value);
  };

  const addTodo = () => {
    if (comment === "") return;

    const todo = {
      id: todos.length + 1,
      comment,
      status: "incomplete",
    };
    setTodos([...todos, todo]);
    setComment("");
  };
  const onClickDelete = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
  };

  return (
    <div className="App-header">
      <h1>TODOリスト</h1>

      <form>
        <label>
          <input type="radio" id="all-Todo" name="Todo" defaultChecked />
          全て
        </label>
        <label>
          <input type="radio" id="incomplete-Todo" name="Todo" />
          作業中
        </label>
        <label>
          <input type="radio" id="complete-Todo" name="Todo" />
          完了
        </label>
      </form>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
        </thead>
        <tbody>
          {todos.map((todo, index) => {
            return (
              <tr key={todo.id}>
                <td>{todo.id}</td>
                <td>{todo.comment}</td>
                <td>
                  <button>作業中</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      <div>
        <h2>新規タスクの追加</h2>
        <input placeholder="Enter a new TODO" value={comment} onChange={onChangeTodo} />
        <button onClick={addTodo}>追加</button>
      </div>
    </div>
  );
}

export default App;

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(<App />, document.querySelector("#root"));

Comments

[maisumakun]

> タスクのIDの番号が振り直される機能を実装したいです。

なぜ振り直さなければならないのでしょうか？

[edu]

maisumakunさん、どのようなコードを書いたら、
追加したタスクの番号が振り直されるような実装ができるのか知りたいからです。
現在、Reactをアウトプット中心に勉強をしていて、アプリをカスタマイズをして
レベルアップを図っています。
qiitaやdevで検索してTodoリストコードサンプルはたくさんあれど、
追加したTaskの番号を振り直される仕組みのTodoリストは見つからなかったので、
ここで質問しました。

[hoshi-takanori]

Todo の質問が非表示になってるのでここに書きますが、まず toggle を書き換えて、
const toggle = (id) => {
setTodos(todos.map(e => e.id === id ? { ...e, status: e.status === "incomplete" ? "complete" : "incomplete" } : e));
};
ボタンを次のようにすれば良いかと。
<button onClick={() => toggle(todo.id)}>{todo.status === "incomplete" ? "作業中" : "完了"}</button>
(todo.status を文字列ではなく true/false にするともっと単純になりますが…。)

Answer 1

追加したタスクの番号が振り直されるような実装ができるのか知りたいからです。

更新後に配列全体にmapをかけて、インデックスを供給していけば、できなくはないです。

ただし、データベースに保存するようなものであれば、idは振り直すべきではありません。

Comments

[edu]

maisumakunさん、丁寧な解説、ありがとうございます！
何でも、idを振り直せば良い訳ではないのですね。

Answer 2

一行の修正でちゃちゃっと済ますんなら、こないにするとか。

-    setTodos(newTodos);
+    setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));

そやけど、これ idやなくて、ただの行番号って感じやな。ま、好きにせえ。

追記:

上のは、修正を一行で済ませて、質問にあるコードをなるべく生かす案やけど、ワテならonClickDelete をこないに書くと思いますわ。

   const onClickDelete = (index) => {
-    const newTodos = [...todos];
-    newTodos.splice(index, 1);
-    setTodos(newTodos);
+    setTodos(
+      todos.filter((_, i) => i !== index).map((e, i) => ({ ...e, id: i + 1 }))
+    );
   };

あ、あと、関数名も onClickDelete やなく、 handleDelete にするかも。なぜゆうたら

• イベントリスナーの変数名にhandleをプレフィックスにするのは、しばしば見られる慣習
• 要素の削除は、（今のところはクリックだけがトリガーでも、）クリックだけによって生じるものではないから

Comments

[edu]

suwmn50799、アドバイスありがとうございます！
期待する実装ができるようになりました！

[退会済みユーザー]

そら、おめっとうさん。別案も追記したで〜

[edu]

suwmn50799さん、別案の『handleDelete』の解説ありがとうございます！
解説を見て、『handleDelete』に変更しました。

[退会済みユーザー]

おおきに〜

コンポーネントの onXXX に設定するコールバックの変数名のプレフィクスを
handle
にする考え方が書いてある投稿としては以下があります。

stackoverflowの質問
What is the right name of event handler? onClick or handleClick?
への回答

・ https://stackoverflow.com/a/60048346

ブログ記事
・ https://jaketrent.com/post/naming-event-handlers-react

・ https://javascript.plainenglish.io/handy-naming-conventions-for-event-handler-functions-props-in-react-fc1cbb791364

[edu]

suwmn50799さん、投稿記事の案内、ありがとうございます！
DeepLを使って、読んでみます！