{"id":3473,"date":"2022-08-27T20:38:42","date_gmt":"2022-08-27T11:38:42","guid":{"rendered":"https:\/\/blog.wsd.sh\/?p=3473"},"modified":"2022-08-27T22:02:49","modified_gmt":"2022-08-27T13:02:49","slug":"nextjs-material-ui-warning-each-child-in-a-list-should-have-a-unique-key-prop","status":"publish","type":"post","link":"https:\/\/blog.wsd.sh\/?p=3473","title":{"rendered":"NextJS – Material UI: Warning: Each child in a list should have a unique \u201ckey\u201d prop.<\/small>"},"content":{"rendered":"

1. Worning message
\nNextJS \u3067Material UI\u3092\u4f7f\u3063\u3066Table\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u308a\u8fbc\u3080\u3068\u4ee5\u4e0b\u306eWarning message\u304c\u51fa\u308b
\n Warning: Each child in a list should have a unique \u201ckey\u201d prop.<\/p>\n

2. Import library<\/p>\n

\r\nimport React from \"react\";\r\nimport { withStyles } from \"@material-ui\/core\/styles\";\r\nimport Table from \"@material-ui\/core\/Table\";\r\nimport TableBody from \"@material-ui\/core\/TableBody\";\r\nimport TableCell from \"@material-ui\/core\/TableCell\";\r\nimport TableContainer from \"@material-ui\/core\/TableContainer\";\r\nimport TableHead from \"@material-ui\/core\/TableHead\";\r\nimport TableRow from \"@material-ui\/core\/TableRow\";\r\nimport Paper from \"@material-ui\/core\/Paper\";\r\n<\/pre>\n
3. \u56de\u907f\u65b9\u6cd5\u306e\u30d2\u30f3\u30c8
\nhttps:\/\/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\/<\/a>
\n\u300c\u547c\u3073\u51fa\u3057\u5074\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u306e\u8981\u7d20\u306bkey\u30d7\u30ed\u30d1\u30c6\u30a3\u3092\u6301\u305f\u305b\u308b\u300d\u3068Worning message\u304c\u56de\u907f\u3067\u304d\u308b\u3068\u3042\u308b\u3002<\/p>\n
4. StyledTableCell
\n– \u305d\u3053\u3067uniq\u306akey\u3092<StyledTableCell> \u306b\u30bb\u30c3\u30c8\u3057\u3066\u307f\u308b<\/p>\n
\r\n <StyledTableCell  key={row.key+\"_1\"}>{row.age}<\/StyledTableCell>\r\n<\/pre>\n
– \u7d50\u679c:Worning\u306e\u307e\u307e
\n– browser\u306einspecotor\u3067\u78ba\u8a8d\u3057\u305f\u304c\u3001key\u306f\u751f\u6210\u3067\u304d\u306a\u3044<\/p>\n
5. Material UI\u306eexample
\n– StyledTableRow\u306bkey\u3092set\u3057\u3066\u3044\u308b
\n– StyledTableCell\u306b\u306fkey\u3092set\u3057\u3066\u3044\u306a\u3044
\n– <StyledTableRow key={row.name} >
\nCustomized Tables
\nhttps:\/\/thewebdev.info\/2020\/08\/01\/material-ui%E2%80%8A-%E2%80%8Acustomize-tables\/<\/a><\/p>\n
\r\n  <TableBody>\r\n    {rows.map(row => (\r\n      <StyledTableRow key={row.name}>\r\n        <StyledTableCell component=\"th\" scope=\"row\">\r\n          {row.name}\r\n        <\/StyledTableCell>\r\n        {row.age}<\/StyledTableCell>\r\n      <\/StyledTableRow>\r\n    ))}\r\n  <\/TableBody>\r\n<\/pre>\n
6. StyledTableRow
\n– \u305d\u3053\u3067key\u3092<StyledTableRow> \u306b\u30bb\u30c3\u30c8\u3057\u3066\u307f\u308b<\/p>\n
\r\n  <StyledTableRow key={row.key}>\r\n<\/pre>\n
– Worning\u306f\u51fa\u306a\u304f\u306a\u3063\u305f
\n– browser\u306einspecotor\u3067\u78ba\u8a8d\u3057\u305f\u304c\u3001key\u306f\u751f\u6210\u3055\u308c\u306a\u3044<\/p>\n","protected":false},"excerpt":{"rendered":"
1. Worning message NextJS \u3067Material UI\u3092\u4f7f\u3063\u3066Table\u306b\u30c7\u30fc\u30bf\u3092\u53d6\u308a\u8fbc\u3080\u3068\u4ee5\u4e0b\u306eWarning message\u304c\u51fa\u308b Warning: Each child in a list s…<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_mi_skip_tracking":false},"categories":[1],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3473"}],"collection":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3473"}],"version-history":[{"count":33,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3473\/revisions"}],"predecessor-version":[{"id":3476,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=\/wp\/v2\/posts\/3473\/revisions\/3476"}],"wp:attachment":[{"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3473"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3473"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.wsd.sh\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3473"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}