【React】Todoリストでタスク追加後にボタンを押したら、タスク追加ボックスの中に『false』『true』が表示されるのを解決したい

Question

Reactで、Todoリストを作成しています。
Todoリストにタスクを追加し、追加したタスクの完了/作業ボタンを押したら、
ボックスの中に『false』『true』が表示されるのを解決したいです。
色々試してみたのですが、状況が変わりません。
何方かアドバイスをお願いします。

####期待する動作
Todoリストにタスクを追加し、完了/作業ボタンを押しても、『false』『true』が表示されず、
ボックスの中に『Enter a new TODO』が表示されるようにしたい。

####問題解決の為に行ったこと
1.検証ツールで、どういった実装が行われているか確認した。

//書き換える前のソースコード
　<h2>新規タスクの追加</h2>
      <input placeholder="Enter a new TODO" value={comment} onChange={onChangeTodo} />
//書き換える後のソースコード
　<h2>新規タスクの追加</h2>
      <input onChange={onChangeTodo} />

　『完了』『作業中』ボタンを押したら、value=" "に『false』『true』が表示。
タスク追加後、ボックスの中に『false』『true』が表示されるので、placeholder="Enter a new TODO" value={comment} の部分を消して、タスクを入力して追加ボタンを押したら、ボックス内に『追加したタスク』が表示されたままの状態になった。

2.関数はtoggleという関数の実装内容を確認してみた。toggleの宣言やボタンのコードを　① - ③ を入れて変えてみたが、症状は変わらなかった。
入力したソースコード

//書き換える前のソースコード
const toggle = () => {
    setComment((prevState) => !prevState);
  };

① const toggle = (value = false) => {
 setComment((prevState) => !prevState, value);
 };

② const toggle = () => {
  const [comment, setComment] = useState(true);

//書き換える前のソースコード
 <button onClick={toggle}>{comment ? "作業中" : "完了"}</button>

③<button onClick={() => setComment(!comment)}>{comment ? "作業中" : "完了"}</button>

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 handleDelete = (index) => {
    const newTodos = [...todos];
    newTodos.splice(index, 1);
    setTodos(newTodos);
    setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
  };
  const toggle = () => {
    setComment((prevState) => !prevState);
  };

  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 onClick={toggle}>{comment ? "作業中" : "完了"}</button>
                  <button onClick={() => handleDelete(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"));

Answer 1

修正するとこ、２箇所あってん。こないにしてみたって。

     setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
   };
-  const toggle = () => {
-    setComment((prevState) => !prevState);
+  const toggle = (index) => {
+    setTodos(todos.map((todo, i) =>
+      index === i ? {
+        ...todo,
+        status: todo.status === 'incomplete' ? 'completed' : 'incomplete', // completed は「完了」を表す
+      } : todo));
   };

   return (

   <td>{todo.id}</td>
   <td>{todo.comment}</td>
   <td>
-    <button onClick={toggle}>{comment ? "作業中" : "完了"}</button>
+    <button onClick={() => toggle(index)}>{todo.status === 'incomplete' ? "作業中" : "完了"}</button>
     <button onClick={() => handleDelete(index)}>削除</button>
   </td>
 </tr>

または、idを使ってstatusをトグルする要素を指定してもええ。修正箇所は、上に同じ２箇所や。

     setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
   };
-  const toggle = () => {
-    setComment((prevState) => !prevState);
+  const toggle = (todoId) => {
+    setTodos(todos.map((todo, i) =>
+      todoId === todo.id ? {
+        ...todo,
+        status: todo.status === 'incomplete' ? 'completed' : 'incomplete', // completed は「完了」を表す
+      } : todo));
   };

   return (

   <td>{todo.id}</td>
   <td>{todo.comment}</td>
   <td>
-    <button onClick={toggle}>{comment ? "作業中" : "完了"}</button>
+    <button onClick={() => toggle(todo.id)}>{todo.status === 'incomplete' ? "作業中" : "完了"}</button>
     <button onClick={() => handleDelete(index)}>削除</button>
   </td>
 </tr>

Comments

[edu]

suwmn50799さん、丁寧な回答、ありがとうございました！
ここのソースコードが怪しいのはわかっていたのですが、
何がどのようにしたらまではわからなかったので、助かりました！
本当にありがとうございました！