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

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

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

調べてコードを入力したのですが、エラー表示が出ます。
エラー表示を調べ、分かる範囲で実装したのですが、改善しません。
何方かアドバイスをお願いします。

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

問題解決の為に行ったこと
① App.js: Unexpected token, expected "," (94:73)表示が出るので、〜のある
（as Filter）該当のコードを消してみた。

App.js
1<h1>TODOリスト</h1>
2  93 |
3> 94 |   <form defaultValue="all" onChange={(e) => setFilter(e.target.value as Filter)}>
4

②下記の表示が出たので、『// eslint-disable-next-line』を13行目に入力してみた。

Compiled with warnings.

src/App.js
  Line 13:40:  Unexpected mix of '<' and '>'  no-mixed-operators
  Line 13:49:  Unexpected mix of '<' and '>'  no-mixed-operators

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

③ 下記のエラーが表示されて、詰んでしまった。

ReferenceError: Filter is not defined
App
src/App.js:14
  11 | const [comment, setComment] = useState("");
  12 | const [value, setValue] = React.useState("all");
  13 | // eslint-disable-next-line
> 14 | const [filter, setFilter] = useState < Filter > "all";
     | ^  15 | 
  16 | const onChangeTodo = (e) => {
  17 |   setComment(e.target.value);

import React, { useState } from "react";

//入力用 todos
//未完了のTodo用 comment
type Filter = "all" | "checked" | "unchecked" | "removed";

function App() {
  // const [inputTodo, setInputTodo] = useState("");
  // const [incompleteTodos, setIncompleteTodos] = useState([]);
  const [todos, setTodos] = useState([]);
  const [comment, setComment] = useState("");
  const [value, setValue] = React.useState("all");
  // eslint-disable-next-line
  const [filter, setFilter] = useState < Filter > "all";

  const onChangeTodo = (e) => {
    setComment(e.target.value);
  };
  const handleChange = (e) => {
    setValue(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);
    setTodos(newTodos.map((e, i) => ({ ...e, id: i + 1 })));
    //setTodos(+todos.filter((_, i) => i !== index).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 toggle = () => {
  //   setComment((prevState) => !prevState);
  // };
  // const toggle = (value = false) => {
  //   setComment((prevState) => !prevState, value);
  // };
  // const toggle = () => {
  //   const [comment, setComment] = useState(true);

  //追加したタスクの削除ボタンを押したら、表示が出るか確認
  // const onClickDelete = () => {
  //   alert("削除");
  // alert(index);
  // };

  // eslint-disable-next-line
  // const VisibilityFilters = {
  //   SHOW_ALL: "全て",
  //   SHOW_INCOMPLETE: "作業中",
  //   SHOW_COMPLETED: "完了",
  // };
  const filteredTodos = todos.filter((todo) => {
    switch (filter) {
      case "all":
        return !todo.removed;
      case "checked":
        return todo.checked && !todo.removed;
      case "unchecked":
        return !todo.checked && !todo.removed;
      case "removed":
        return todo.removed;
      default:
        return todo;
    }
  });

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

      <form defaultValue="all" onChange={(e) => setFilter(e.target.value)}>
        {/* <label defaultId="all-Todo" onChange={(e) => e.preventDefault()}> */}

        {/* <label defaultValue="all" onChange={(e) => setFilter(e.target.value as Filter)}> */}
        <label>
          <input type="radio" value="all" name="Todo" onChange={handleChange} checked={value === "all"} />
          全て
        </label>
        <label>
          <input type="radio" value="incomplete" name="Todo" onChange={handleChange} checked={value === "incomplete"} />
          作業中
        </label>
        <label>
          <input type="radio" value="completed" name="Todo" onChange={handleChange} checked={value === "completed"} />
          完了
        </label>
      </form>

      <table>
        <thead>
          <tr>
            <th>ID</th>
            <th>コメント</th>
            <th>状態</th>
          </tr>
        </thead>
        <tbody>
          {/* {todos.map((todo, index) => { */}
          {filteredTodos.map((todo, index) => {
            return (
              <tr key={todo.id}>
                <td>{todo.id}</td>
                <td>{todo.comment}</td>
                <td>
                  {/* <button onClick={() => setComment(!comment)}>{comment ? "作業中" : "完了"}</button> */}
                  {/* <button onClick={toggle}>{comment ? "作業中" : "完了"}</button> */}
                  <button onClick={() => toggle(todo.id)}>{todo.status === "incomplete" ? "作業中" : "完了"}</button>
                  <button onClick={() => onClickDelete(index)}>削除</button>
                  {/* <button onClick={() => onClickEdit(todoText)}>編集</button> 
            <input value={todo} onChange={e => {
              setIncompleteTodos([])
            }}/>
            <button onClick={() => onClickComplete(index)}>完了</button>
            <button onClick={() => onClickDelete(index)}>削除</button>
 */}
                </td>
              </tr>
            );
          })}
        </tbody>
      </table>

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

export default App;

index.js
1import React from "react";
2import ReactDOM from "react-dom";
3import App from "./App";
4
5ReactDOM.render(<App />, document.querySelector("#root"));
6

行動規範の内容に同意します

回答1件

ベストアンサー

質問に対する回答をする前に、あれ？と思たわ。

Appのソースコードの中で

type Filter = "all" | "checked" | "unchecked" | "removed";

という行があるけど、Typescriptでやることにしたんか？

であれば、App　のソースファイルは、App.js　やのうて、App.tsか、App.tsx になるはずやねん。
ほんで、JavaScriptで始めたプロジェクトを途中からTypescript に切り替えるのは難儀やな。練習用のプロジェクトなんやろうから、

途中からTypescriptにせずに、
いったんJavaScriptで想定している機能を作り上げてから、
別プロジェクトとして、Typescriptの新プロジェクトを

npx create-react-app --template typescript myproject
とかで作って、

Javascriptで既に作ってあるApp.jsだったりのコードをTypescriptのプロジェクトにコピーして、App.tsxにファイル名を変えて、内容も適宜 Typescriptに対応させる。

という段階を踏んだほうがよいと思いますわ。

(1)Reactの基礎を習得すること
と、
(2)TypescriptとJavascriptの差を意識、理解しながら、Typescriptを習得する。

という二本の異なる学習工程を並行でやるのは（ひとつだけやってると飽きるので、）別に悪くはないですが、それをひとつのプロジェクトでやろうとすると混乱して、学習の目的ではないことの解決に時間を取られるんやないかと老婆心ながら思うわ。

・・・という背景をふまえて、問題の原因をみると、今のところ、Typescript でしか使えない行は

type Filter = "all" | "checked" | "unchecked" | "removed";

だけのようなので、この行を削除して、今やろうとしている

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

という新しい機能の実装に取り組むことをオススメしたいですわ。

投稿2021/09/26 06:46

退会済みユーザー

総合スコア0

edu

2021/09/26 07:57

suwmn50799さん、丁寧なアドバイス、ありがとうございます！アドバイスを読まさせて頂きました。質問の内容は、完全な勉強不足でした。 todoリストのラジオボタンの『全て』『作業中』『完了』をクリックすると追加したタスクのボタンい合わせて、表示・非表示になるように実装したいと思い、色々ソースコードを探して、Typescriptのソースコードとわからず、type Filter = "all" | "checked" | "unchecked" | "removed";を使用していました。もう一度、reactで探してみます。

退会済みユーザー

2021/09/26 08:06

なるほど。そういうことだったんですね。

行動規範の内容に同意します