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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/09/26 07:57
退会済みユーザー
2021/09/26 08:06