Chapter 08無料公開

todos ステートを展開してページに表示する

Kei Touge
Kei Touge
2021.10.23に更新

todos ステート配列を Array.map() メソッドで展開する

todos ステートを展開し、タスク一覧としてページに表示します。
具体的には、todos (=配列) を非破壊メソッドである Array.prototype.map() を使って <li></li> タグへ展開します。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/map

https://zenn.dev/kojinishimura/articles/78450a1fe35664
src/App.tsx
    <div>
      <form onSubmit={(e) => handleOnSubmit(e)}>
        <input
          type="text"
          value={text}
          onChange={(e) => setText(e.target.value)}
        />
        <input type="submit" value="追加" onSubmit={(e) => handleOnSubmit(e)} />
      </form>
      <ul>
        {todos.map((todo) => {
          return <li>{todo.value}</li>;
        })}
      </ul>
    </div>

ただし、これだけでは各 <li>key プロパティが設定されていないため、以下のような警告が表示されてしまいます。

チュートリアル:React の導入 - key を選ぶ(公式)

2021-04-25 7.45.35.png

2021-04-25 7.44.18.png

リストをレンダーするときの key の重要性

なぜリストの各項目に key プロパティが必要となるのでしょうか?

React はリストをレンダーする際、どのアイテムが変更になったのか特定できる必要があります。リストのアイテムは追加された可能性も、削除された可能性も、並び替えられた可能性も、中身自体が変更になった可能性もあるからです。

変更・追加・削除・並び替えを検知するためには、リストの各項目を特定する一意な識別子が必要です。

この一意な識別子こそが key プロパティであり、上の警告は『各項目を特定することができないため、リストに変更が加えられても正しく再レンダーできない可能性があります』という意味で表示されているのです。

次章では、この key プロパティを各項目へ与えるため、Todo 型オブジェクト の仕様について再考します。