実施条件
環境
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)は、
状態をもつ - コンテンツ(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が判断し、後で正しく更新するために必要です。
イメージ
Todo.jsx(旧)
Todo.jsx
