【react】Todoリストの追加したタスクの表示・非表示を切り替えたい。

Question

ReactでTodoリストを作成しています。

todoリストのラジオボタンの『全て』『作業中』『完了』をクリックすると追加したタスクのボタンに合わせて、
表示・非表示になるようにしたいです。

以前、このサイトで質問をした際、エラーが出るのは、
『TypeScriptのソースコードを入力したのが原因』とこのサイトで教えて頂きました。
再度、reactの関数コンポーネントのサンプルを探し、
改めてソースコードを入力したが、
ラジオボタンをクリックしても、追加したタスクが表示/非表示にならず、
期待する動作をしない状況で、詰まっています。
何方かアドバイスをお願いします。

期待する動作
① タスクの状態によって表示/非表示を切り替えできる
② 選択されたラジオボタンに応じて、タスクの表示を切り替える

現在の状況
ソースコードを入力したが、ラジオボタンをクリックしても、追加したタスクが表示/非表示にならない。
検証ツールで、エラー表示が出ないので、何処に問題があるのかわからない。

問題解決の為に行ったこと
① 検証ツールを見ても、エラーの表示はなかった。
② ソースコードの書き間違いがないか確認した。

import React, { useState } from "react";

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

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

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);
    setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
  };
  const toggle = (todoId) => {
    setTodos(
      todos.map((todo, i) =>
        todoId === todo.id
          ? {
              ...todo,
              status: todo.status === "incomplete" ? "completed" : "incomplete", // completed は「完了」を表す
            }
          : todo
      )
    );
  };

  const switchTodos = () => {
    if (radio === "complete") {
      return todos.filter((todo) => todo.complete);
    }
    if (radio === "incomplete") {
      return todos.filter((todo) => !todo.complete);
    }
    return todos;
  };

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

      <form>
        <label>
          <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
          全て
        </label>
        <label>
          <input
            type="radio"
            value="incomplete"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "incomplete"}
          />
          作業中
        </label>
        <label>
          <input
            type="radio"
            value="completed"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "completed"}
          />
          完了
        </label>
      </form>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
        </thead>
        <tbody>
          {switchTodos().map((todo, index) => {
            return (
              <tr key={todo.id}>
                <td>{todo.id}</td>
                <td>{todo.comment}</td>
                <td>
                  <button onClick={() => toggle(todo.id)}>{todo.status === "incomplete" ? "作業中" : "完了"}</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

      <div>
        <h2>新規タスクの追加</h2>

        <input placeholder="Enter a new TODO" value={comment} onChange={(e) => setComment(e.target.value)} />
        <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]

> 期待する動作にならない。

とありますが、現状はどのような動作になっているのでしょうか？「表示すらされない」と「ボタンが出るけど、押しても反応しない」と「ボタンが出て押せるけど、意図しない動作が起きる」では、また対応が違ってくることが考えられます。

[edu]

maisumakunさん、丁寧なアドバイス、ありがとうございます！
質問の内容の指摘、自身の説明不足でした。
質問内容を訂正します。

Answer 1

switchTodos()が間違うてるで。
あるtodoの完了、未完の値は、status プロパティに入ってるやん。そやから最小限の修正でやるなら、こう

   const switchTodos = () => {
-    if (radio === "complete") {
-      return todos.filter((todo) => todo.complete);
+    if (radio === "completed") {
+      return todos.filter((todo) => todo.status === 'completed');
     }
     if (radio === "incomplete") {
-      return todos.filter((todo) => !todo.complete);
+      return todos.filter((todo) => todo.status === 'incomplete');
     }
     return todos;
   };

やけど、こない

const switchTodos = () =>  radio === "all" ? todos : todos.filter(({ status }) => status === radio);

に、一行でも書けるよってに。

補足

以下は本題とは無関係なお節介なので、時間あるときにでも読んでみてや。

ここんとこ

      <form>
        <label>
          <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
          全て
        </label>
        <label>
          <input
            type="radio"
            value="incomplete"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "incomplete"}
          />
          作業中
        </label>
        <label>
          <input
            type="radio"
            value="completed"
            onChange={(e) => setRadio(e.target.value)}
            checked={radio === "completed"}
          />
          完了
        </label>
      </form>

<form>の中に、ラジオボタン３つ並べてるんやけど、似たようなコードのかたまりが3回連続するやん。そやから <label>から </label> までんとこ、別のコンポーネントに切り出すとええで。やり方の一例としては、こんなん

import React, { useState } from "react";

+const FILTER_VALUES = [
+  { value: "all", text: "全て" },
+  { value: "incomplete", text: "作業中" },
+  { value: "completed", text: "完了" }
+];
+
+const FilterButton = ({ value, text, checked, onChange }) => (
+  <label>
+    <input
+      type="radio"
+      value={value}
+      onChange={(e) => onChange(e.target.value)}
+      checked={checked}
+    />
+    {text}
+  </label>
+);

 //入力用 todos
 //未完了のTodo用 comment
 
 function App() {
   const [todos, setTodos] = useState([]);

を追加しといて、こうや。

       <form>
-        <label>
-          <input type="radio" value="all" onChange={(e) => setRadio(e.target.value)} checked={radio === "all"} />
-          全て
-        </label>
-        <label>
-          <input
-            type="radio"
-            value="incomplete"
-            onChange={(e) => setRadio(e.target.value)}
-            checked={radio === "incomplete"}
-          />
-          作業中
-        </label>
-        <label>
-          <input
-            type="radio"
-            value="completed"
-            onChange={(e) => setRadio(e.target.value)}
-            checked={radio === "completed"}
+        {FILTER_VALUES.map(({ value, text }) => (
+          <FilterButton
+            key={value}
+            value={value}
+            text={text}
+            checked={radio === value}
+            onChange={setRadio}
           />
-          完了
-        </label>
+        ))}
       </form>

Comments

[edu]

suwmn50799さん、いつも丁寧な解説付きの回答、ありがとうございます！
追加したタスクの完了/未完の値は、『status』 プロパティに入っているのを思い付かなかった点が
自身の反省点です。
補足の解説を含めて、本当に、ありがとうございました！

[退会済みユーザー]

おおきに〜

ところでeduさんはGitを使えますか？

今回 Todoリストを作りながら、段階的に様々な機能を追加する中で、コードを追加したり修正したり削除したりしたと思いますが、何かの習得（今回はReactの基礎）のためのプロジェクトではコードを追加したり削除したり
したときに、何の意図でそれを行ったかの履歴を後で見返せると次への土台になります。

あるまとまった機能を追加するたびに、そのために行った追加、修正を振り返れば、次の機能追加のときに
前回追加したコードのどこを使えるかの見当をつけることができます。
そのためのコード修正履歴を残すものとして、Gitは欠かせないツールです。
そしてできれば学習用に作ったものはGitHubに入れておくとよいです。
このサイトで質問するときもそうですが、自分の書いたコードを人に見てもらい修正の提案だったりが欲しいときに、「GitHub のここに入れてあります」とURLを教えれば話が早いです。

まだGitやGitHubにまったく触ったことがないのでしたら、入門記事を検索して目を通してみるとよいかもしれません。

[edu]

suwmn50799さん、アドバイス、ありがとうございます！
GitとGit Hubは、コードレビューができる程度ですが使えます。
コード修正履歴など教えて頂いた内容は、プログラミングはこの積み重ねだと思うので、
Git Hubを使用しながら学習するのとNotionを使ってわかるようにはしています。
いつも丁寧なアドバイスと解説、本当にありがとうございます！