[Q&A] todoアプリの削除機能の実装について

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)}>✖︎

上記retrunを削除すると検索窓に打ったテキストが表示されなくなってしまいます。。。。

2Answer

@yucatio posted at 2022-01-16

        {todos.map((todo, index) => {
         return   <li key={index}>{todo}
          <button onClick={() => deleteTodo(index)}>✖︎</button></li>
        })}

こちらはこれでも合ってますし、

        {todos.map((todo, index) => <li key={index}>{todo}
          <button onClick={() => deleteTodo(index)}>✖︎</button></li>
        )}

こちらのほうがシンプルです。

 const addTodo = () => {
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");

    //delete関数をconstで作成
    const deleteTodo = () => {
        <ul>
          {arr.map((index, i) => <li key={i}>{index}</li>)};
        </ul>
        console.log(todos);
    };
    };

addTodoの中にdeleteTodoが入ってしまっているのでエラーになっています。

  const addTodo = () => {
    setTodos([...todos, tmpTodo]);
    setTmpTodo("");
  };

  const deleteTodo = (index) => {
    // console.log("deleteTodo index:" + index)
    // TODO 実装
    // setTodos(削除後の配列)
  };

このようにそろえてみてください。
また、deleteTodoの中身は、jsxではなくaddTodoと同様にsetTodoを行います。

@yuta1414win posted at 2022-01-16

@yucatio

今回もご回答いただきありがとうございます！