[React][L1] コンテンツ(li)を一覧で出力する

# 実施条件
~~[]()を理解していること~~

# 環境
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
~~~diff_html:index.html
<!DOCTYPE html>
<html lang="en">
  <head> </head>

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

## index.jsx
~~~diff_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(旧)
~~~diff_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
~~~diff_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>
    </>
  );
};

~~~

# 解説
## 目的
1. コンテンツ(li)を、`状態`で管理する

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

※: `completeTodos`も同様

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

※: `completeTodos`も同様

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

[key によるリストアイテムの順序の保持 ](https://ja.react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)

# イメージ
## Todo.jsx(旧)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/44b03209-392f-999c-75e0-cad312a32b7f.png)

## Todo.jsx
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2955010/848f8848-5c79-88a2-c2f4-f46c4ec75317.png)

# 参考リンク
- [[JavaScript] mapメソッドとは](https://qiita.com/Jochun/items/dafaae7fbc19ca7f9056)
- [リストのレンダー](https://ja.react.dev/learn/rendering-lists)
- [リストと key](https://ja.legacy.reactjs.org/docs/lists-and-keys.html)
- [key によるリストアイテムの順序の保持 ](https://ja.react.dev/learn/rendering-lists#keeping-list-items-in-order-with-key)
- [モダンJavaScriptの基礎から始める挫折しないためのReact入門
](https://www.udemy.com/course/modern_javascipt_react_beginner)