React+TypeScript IDの自動生成

はじめに

reactではリストをmapで書きますが、するとkeyを指定せよと警告が出ます。

ネットの例を見るとindexを使っているのが多いのですが、indexではkeyの意味がないので良くないらしい。

リストの対象となろオブジェクトやJsonの長さをkeyにしている例も多いのですが、これは元のデータにidが指定してあった場合問題ではないか。

元データをIDが指定してあるデータに限りますがidを自動生成するプログラムを書いてみました。

実行例

See the Pen Untitled by kalz2q (@kalz2q) on CodePen.

解説

ロジックはデータがカラならば0を返し、そうでなければ、idのリストを作って、ソートして、最大の数値に1を足して返します。

uuidを使ってインターネット上でユニークなidを取得する、と言うとんでもないのがあるらしいけれど、自分の環境では動かなかった。