todoアプリの削除機能の実装について
解決したいこと
todoアプリの削除機能を実装したいのですが、うまくいきません・・・
例）
発生している問題・エラー
Unhandled Runtime Error
ReferenceError: deleteTodo is not defined
Source
pages/todo.jsx (38:33) @ onClick
36 | {todos.map((todo, index) => {
37 | return <li key={index}>{todo}
> 38 | <button onClick={() => deleteTodo(index)}>✖︎</button></li>
| ^
39 | })}
40 | </ul>
41 | <style>{`
例）
NameError (uninitialized constant World)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
import { useState } from "react";
const App = () => {
// 作成したtodoを入れておくためのstate"配列"を活用する
const [todos, setTodos] = useState([]);
// フォームに入力された値をtodoに登録するまでに入れておくためのstate"文字列"
const [tmpTodo, setTmpTodo] = useState("");
const addTodo = () => {
setTodos([...todos, tmpTodo]);
setTmpTodo("");
//delete関数をconstで作成
const deleteTodo = () => {
<ul>
{arr.map((index, i) => <li key={i}>{index}</li>)};
</ul>
console.log(todos);
};
};
return (
<>
<h1>Todo App</h1>
<div className="form">
<input
type="text"
name="todo"
// formの入力値をtmpTodoで持っておく
onChange={e => setTmpTodo(e.target.value)}
value={tmpTodo}
/>
<button onClick={addTodo}>追加</button>
</div>
<ul>
{todos.map((todo, index) => {
return <li key={index}>{todo}
<button onClick={() => deleteTodo(index)}>✖︎</button></li>
})}
</ul>
<style>{`
h1 {
text-align: center;
}
.form {
display: flex;
justify-content: center;
}
ul {
width: 200px;
margin: 10px auto;
}
`}</style>
</>
);
};
export default App;
自分で試したこと
ファイル内にretrunが1つしか書けないのは理解したのですが、
- {todo}
deleteTodo(index)}>✖︎ })}
{todos.map((todo, index) => {
return
上記retrunを削除すると検索窓に打ったテキストが表示されなくなってしまいます。。。。
0
