1. Worning message
NextJS でMaterial UIを使ってTableにデータを取り込むと以下のWarning messageが出る
Warning: Each child in a list should have a unique “key” prop.

2. Import library

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";

3. 回避方法のヒント
https://dev.classmethod.jp/articles/avoiding-warningeach-child-in-a-list-should-have-a-unique-key-prop-in-react-apps-is-called-and-not-on-the-side-do-it-on-the-caller/
「呼び出し側のコンポーネントの要素にkeyプロパティを持たせる」とWorning messageが回避できるとある。

4. StyledTableCell
– そこでuniqなkeyを<StyledTableCell> にセットしてみる

 <StyledTableCell  key={row.key+"_1"}>{row.age}</StyledTableCell>

– 結果:Worningのまま
– browserのinspecotorで確認したが、keyは生成できない

5. Material UIのexample
– StyledTableRowにkeyをsetしている
– StyledTableCellにはkeyをsetしていない
– <StyledTableRow key={row.name} >
Customized Tables
https://thewebdev.info/2020/08/01/material-ui%E2%80%8A-%E2%80%8Acustomize-tables/

  <TableBody>
    {rows.map(row => (
      <StyledTableRow key={row.name}>
        <StyledTableCell component="th" scope="row">
          {row.name}
        </StyledTableCell>
        {row.age}</StyledTableCell>
      </StyledTableRow>
    ))}
  </TableBody>

6. StyledTableRow
– そこでkeyを<StyledTableRow> にセットしてみる

  <StyledTableRow key={row.key}>

– Worningは出なくなった
– browserのinspecotorで確認したが、keyは生成されない