LoginSignup
yuta1414win
@yuta1414win

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

どのTodoを押したかがわかる方法

解決したいこと

どのTodoを押したかを関数で伝える方法

例)
今Todoアプリを作成しているのですが、どのTOdoを押したか
関数で伝える方法を教えていただきたいです。

例)

import { useState } from "react";

const App = () => {
  // 作成したtodoを入れておくためのstate"配列"を活用する
  const [todos, setTodos] = useState([]);
  // フォームに入力された値をtodoに登録するまでに入れておくためのstate"文字列"
  const [tmpTodo, setTmpTodo] = useState("");

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

  const deleteTodo = (index) => {
    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) => <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;
0

1Answer

どのTodoを押したかは、(今回はとりあえず)indexで渡しています。

とりあえず

  const deleteTodo = (index) => {
    console.log("index:" + index)
    console.log(todos[index])
  };

としてみて、xボタンを押して、コンソールで確認してみてください。

1

Comments

  1. @yuta1414win

    Questioner
    @yucatioさん

    ありがとうございます。
    こちらを追記したのですが、typescriptファイルでのみ使用できます。と記載されてしまいます。。。
  2. すいません、修正しました

Your answer might help someone💌