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

Question

解決済

2

回答数

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

2021/09/13 21:50更新

初心者 react

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"));

確認したいことがあったら質問者に確認してヤァ！

回答

yusukeM

2021/09/14

ありがとう!

返信

geno

2021/09/15

{todos.map((todo, index) => { return ( <tr key={todo.id}> <td>{todo.id}</td> <td>{todo.comment}</td> <td> <button>作業中</button> <button onClick={() => onClickDelete(todo.id)}>削除</button>

返信

geno

2021/09/15

const onClickDelete = (id) => { const newTodos = todos.filter((todo) => todo.id !== id); setTodos(newTodos); };

返信

geno

2021/09/15

const addTodo = () => { if (comment === "") return; const todo = { id, comment, status: "incomplete", }; setId(id + 1); setTodos([...todos, todo]); setComment(""); };

返信

geno

2021/09/15

function App() { const [todos, setTodos] = useState([]); const [comment, setComment] = useState(""); const [id, setId] = useState(1); const onChangeTodo = (e) => { setComment(e.target.value); };

返信

geno

2021/09/15

yusukeMさん、丁寧な解説、ありがとうございます！質問なのですが、教えて頂いたソースコードを入力したのですが、連番になりません。申し訳ないのですが、原因が何処にあるかアドバイスをお願いします。

返信

yusukeM

2021/09/17

ベストアンサー

返信

geno

未経験からフロントエンジニアへの転職を目指し、プログラミングを勉強中。 2023年より受託開発企業にて働く。

Answer 1

filterメソッドを使って条件に一致した要素で新しいtodoの配列を作成します

  const onClickDelete = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    setTodos(newTodos);
  };

<button onClick={() => onClickDelete(todo.id)}>削除</button>

この条件だとidが一致しない要素の配列を作成するということなので要するにidが一致したtodoが削除された配列が作れます

 todo.id !== id

以前にも話したと思いますが下のコードだと todoを削除すると配列の要素数が減ってしますので連番になりません

id: todos.length + 1

なのでidのstateを用意します

const [id, setId] = useState(1);

これでtodoを削除しても連番になります

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

    const todo = {
      id,
      comment,
      status: "incomplete",
    };

    setId(id + 1);
    setTodos([...todos, todo]);
    setComment("");
  };

Answer 2

自分の環境ではこのコードで連番になります

import { useState } from "react";

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

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

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

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

    const todo = {
      id,
      comment,
      status: "incomplete",
    };

    setId(id + 1);
    setTodos([...todos, todo]);
    setComment("");
  };
  const onClickDelete = (id) => {
    const newTodos = todos.filter((todo) => todo.id !== id);
    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(todo.id)}>削除</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;