【React初心者】Warning 「 Each child in an array or iterator should have a unique "key" の対処方法

はじめに

yosukeです！
先日、私が所属するevoluの自社サービスとしてリリースした「 小説執筆アプリ - Mono - 」のUIを急遽Reactで作り直しちゃおうとなり、０からReactを学びながら実装に励んでおります！

状況

小説のタイトルのeditページ更新処理を行う関数コンポーネント内でmapを使いform内で更新対象のカラムをループ描画させた

結果

問題なく動作はするがデベロッパーツールのコンソールに表題のエラーが表示される

結論

「配列に、一意の「キー」が必要です」とのことなので、ループ処理領域のFormタグにkeyを渡して解消

edit.tsx　コンポーネント単体でキー指定

  return (  
            //省略

  {users.map((user) =>
          <Form key={(user.id)}>

            //省略

     )}

こんな感じでkey属性に一意の値を渡してあげれば解消します。

edit.tsx　親コンポーネント側に子コンポーネントを呼んでキー指定する場合

return (
    <>
      {users.map((user) =>
        plot.plot_contents.map((plot_content) =>
          <PlotEditForm
            name={user.name}
            key={user.id}///これ！
          />
        ))}

コンポーネントをpropsでやりとりしている場合は親コンポーネント側でkeyを指定してあげます。

詳しくはこちら
https://facebook.github.io/react/docs/lists-and-keys.html
これを読むと、listで書かれてますがFormも同じで、返されるDOMはidを持つことで不要なレンダリングを避けたりできるとのこと。
「ユニークなidをkeyに渡すことでパフォーマンス低下対策をしている」という感じですかね。

参考doc：https://facebook.github.io/react/docs/lists-and-keys.html