実施条件

~~を理解していること~~

環境

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 "./styles.css";

export const Todo = () => {
  return (
    <>
      <div className="input-area">
        <input placeholder="TODOを入力"></input>
        <button>追加</button>
      </div>
      <div className="incomplete-area">
        <p className="title">未完了のTODO</p>
        <ul>
          <li>
            <div className="list-row">
              <p>TODOです</p>
              <button>完了</button>
              <button>削除</button>
            </div>
          </li>
          <li>
            <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>
          <li>
            <div className="list-row">
              <p>TODOでした</p>
              <button>戻す</button>
            </div>
          </li>
          <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 [incompleteTodos, setIncompleteTodos] = useState([
+   "TODOです1",
+   "TODOです2",
+ ]);
+ const [completeTodos, setCompleteTodos] = useState([
+   "TODOでした1",
+   "TODOでした2",
+ ]);

  return (
    <>
      <div className="input-area">
        <input placeholder="TODOを入力"></input>
        <button>追加</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>
    </>
  );
};

解説

目的

コンテンツ(li)を、状態で管理する

コーディング

未完了のTODOの一覧を状態として管理する
- incompleteTodos: State変数
- setIncompleteTodos: State変数を更新するための関数（更新関数）
コンテンツ(li)は複数のリストとして表示したいため、配列として定義する
定義されたState変数を、配列をmapメソッドを用いてループして出力する
mapメソッドを使用しているため、出力されるコンテンツに一意なkeyを持たせる

※: completeTodosも同様

処理

初期値TODOです1が、mapメソッドの引数todoに入る
returnされる
初期値TODOです2が、mapメソッドの引数todoに入る
returnされる
結果的に２つのliタグが出力される

※: completeTodosも同様

Tips

keyは、配列のどの要素がどのコンポーネントに対応するのかをReactが判断し、後で正しく更新するために必要です。

key によるリストアイテムの順序の保持

イメージ

Todo.jsx(旧)

Todo.jsx

参考リンク