実施条件

[React][L3] テキストボックスの内容を出力するを理解していること

環境

MacBook Pro (2.3 GHz 8コアIntel Core i9)
macOS 14.0（23A344）
Homebrew 4.3.8
gh 2.52.0

ソースコードの前に

フォルダ構成

folda_structure

├── package.json
├── public/
│   └── index.html
├── src/
│   ├── index.jsx
│   ├── Todo.jsx
│   └── styles.css
│

index.html

index.html

<!DOCTYPE html>
<html lang="en">
  <head> </head>

  <body>
    <div id="root"></div>
  </body>
</html>

index.jsx

index.jsx

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import { Todo } from "./Todo";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <Todo />
  </StrictMode>
);

ソースコード

Todo.jsx(旧)

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {

  const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

  const onChangeTodoText = (event) => setTodoText(event.target.value);

  const onClickAdd = () => {
    if (todoText === "") {
      return;
    } else {
      const newTodos = [...incompleteTodos, todoText];
      setIncompleteTodos(newTodos);
      setTodoText("");
    }
  };

  return (
    <>
      <div className="input-area">
        <input placeholder="TODOを入力"></input>
        <input placeholder="TODOを入力" value={todoText} onChange={onChangeTodoText}></input>
        <button>追加</button>
        <button onClick={onClickAdd}>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>
          {incompleteTodos.map((todo) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>完了</button>
                  <button>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

Todo.jsx

Todo.jsx

import { useState } from "react";
import "./styles.css";

export const Todo = () => {
  const [todoText, setTodoText] = useState("");
  const [incompleteTodos, setIncompleteTodos] = useState([
    "TODOです1",
    "TODOです2",
  ]);
  const [completeTodos, setCompleteTodos] = useState([
    "TODOでした1",
    "TODOでした2",
  ]);

  const onChangeTodoText = (event) => setTodoText(event.target.value);

  const onClickAdd = () => {
    if (todoText === "") {
      return;
    } else {
      const newTodos = [...incompleteTodos, todoText];
      setIncompleteTodos(newTodos);
      setTodoText("");
    }
  };
+  const onClickDelete = (index) => {
+   const newTodos = [...incompleteTodos];
+   newTodos.splice(index, 1);
+   setIncompleteTodos(newTodos);
+ };

  return (
    <>
      <div className="input-area">
        <input
          placeholder="TODOを入力"
          value={todoText}
          onChange={onChangeTodoText}
        ></input>
        <button onClick={onClickAdd}>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>
-         {incompleteTodos.map((todo) => {        
+         {incompleteTodos.map((todo, index) => {
            return (
              <li key={todo}>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>完了</button>
-                 <button>削除</button>
+                 <button onClick={() => onClickDelete(index)}>削除</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
      <div className="complete-area">
        <p className="title">完了のTODO</p>
        <ul>
          {completeTodos.map((todo) => {
            return (
              <li>
                <div className="list-row">
                  <p>{todo}</p>
                  <button>戻す</button>
                </div>
              </li>
            );
          })}
        </ul>
      </div>
    </>
  );
};

解説

目的

buttonタグ(削除)を押下した時に、配列incompleteTodosの任意の要素を削除する

コーディング

buttonタグ(削除)を押下した際に発火する、onClickイベントを設定する

Todo.jsx

-                 <button>削除</button>
+                 <button onClick={onClickDelete)}>削除</button>

onClickイベントで呼び出される関数をonClickDeleteとして設定する
Todo.jsx
```
+  const onClickDelete = () => {
+ };
```
配列incompleteTodosの任意の項目を指定するには、配列incompleteTodos内の何番目の配列かを見分けられれば良い
=配列のindexを取得する
Todo.jsx
```
-         {incompleteTodos.map((todo) => {        
+         {incompleteTodos.map((todo, index) => {
```
onClickDeleteにindexを関数の引数として設定する
Todo.jsx
```
+  const onClickDelete = (index) => {
+ };
```
onCkickにindexを関数の引数として設定する
なぜ、onClick={onClickDelete(index)と記載せずに、onClick={() => onClickDelete(index)と記載するかはこちらを参照
Todo.jsx
```
-                 <button>削除</button>
+                 <button onClick={() => onClickDelete(index))}>削除</button>
```

最新の配列incompleteTodosをnewTodosとして定義する

Todo.jsx

   const onClickDelete = (index) => {
+   const newTodos = [...incompleteTodos];
  };

spliceメソッドを使って、渡ってきた第一引数indexから第二引数1番目を削除する

Todo.jsx

   const onClickDelete = (index) => {
    const newTodos = [...incompleteTodos];
+   newTodos.splice(index, 1);
  };

newTodosを配列incompleteTodosの更新関数であるsetIncompleteTodosに引数として渡す
= 配列incompleteTodosを更新する

Todo.jsx

   const onClickDelete = (index) => {
    const newTodos = [...incompleteTodos];
    newTodos.splice(index, 1);
+   setIncompleteTodos(newTodos);
  };

処理

incompleteTodosに登録されているTODOがリストとして表示されている
ユーザーが削除ボタンを押下する
onClickイベントが発火する
{incompleteTodos.map((todo, index) => {...}}によってindexが各li要素に渡されているので、該当の要素がわかる
() => onClickDelete(index)が実行される
該当のindexがonClickDeleteに渡る
最新の配列incompleteTodosをnewTodosに渡す（コピーする）
spliceメソッドを使って、newTodosの第一引数indexから第二引数1番目を削除する
newTodosを更新関数setIncompleteTodosに渡す
incompleteTodosが更新される
Reactの再レンダリングがトリガーされる
buttonタグ(削除)を押下した時に、配列incompleteTodosの任意の要素が削除される

イメージ

Todo.jsx(旧)

Todo.jsx

参考リンク