質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

解決済

1回答

1031閲覧

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

edu

総合スコア35

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2021/09/26 06:02

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問