62751


## 概要

現在、TypeScript + React + Material-UIを用いた開発を行っています。  
その中でオブジェクトをmap()で回して表示しているのですが、下記の様なエラーが発生いたしました。  
差分表示の際にユニークなkeyを使用した方がパフォーマンスがよくなるということは理解しているのですが、何か勘違いをしているのか、中々エラーが消えてくれません。  
自分なりに色々しらべてみましたが解決せず…。  
どなたか解決方法のご教授よろしくお願い致します。

## エラーの内容

[code]

    index.js:1 Warning: Each child in a list should have a unique "key" prop.
    
[/code]

## 該当するコード

[code]

    import React from 'react'
    import { useSelector } from 'react-redux'
    import styled from 'styled-components'
    
    import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'
    import TreeView from '@material-ui/lab/TreeView'
    import ExpandMoreIcon from '@material-ui/icons/ExpandMore'
    import ChevronRightIcon from '@material-ui/icons/ChevronRight'
    import TreeItem from '@material-ui/lab/TreeItem'
    
    const useStyles = makeStyles((theme: Theme) => createStyles({
      toolbar: {
        ...theme.mixins.toolbar
      },
    }))
    
    const History: React.FC = () => {
      const classes = useStyles()
      // historiesにはreduxのstoreから取得した、オブジェクトの配列が格納されています。
      const histories = useSelector((state: any) => state.HistoryReducer.histories)
    
      return (
        <Root>
          <div className={classes.toolbar} />
          <H1>購入履歴</H1>
          <TreeView
            defaultCollapseIcon={<ExpandMoreIcon />}
            defaultExpandIcon={<ChevronRightIcon />}
          >
            // ここです
            {
              histories.map((history: any, i: string) => (
                <>
                  <TreeItem key={i} nodeId={i} label={`${history.date}　` + `${history.store.address}　` + `${history.company.name}　` + `¥${history.sum}`}>
                    // ここです
                    {history.products.map((product: any, j: string) => (
                      <>
                        <TreeItem key={j} nodeId={i} label={`${product.name}　　` + `¥${product.price}`}>
                        </TreeItem>
                      </>
                    ))}
                  </TreeItem>
                </>
              ))
            }
          </TreeView>
        </Root >
      )
    }
    
    const Root = styled.div`
      padding-bottom: 50px;
    `
    
    const H1 = styled.h1`
      text-align: center;
    `
    
    export default History
    
[/code]


CC BY-SA 4.0
2020-02-03T01:02:05.553
62734
2020-02-03T15:03:11.470
2020-02-03T01:09:33.607
32711
32711
question
javascript reactjs typescript
TypeScriptのmap()を使用した際のkeyエラー


<>にkeyを指定したら解決しました。ありがとうございました！


CC BY-SA 4.0
2020-02-03T15:03:11.470
62751
2020-02-03T15:03:11.470
32711
62734
answer