reactでmapする要素を切り出したときにkeyを指定する

reactのコンポーネント内でmapなどの繰り返し処理を使ってリストを作成する場合、keyを指定しなければならない。

keyを指定しないともちろんエラーが起きる

render(){
  const {list} = this.state;
  return(
    <ul>
      {list.map((item, i) => {
        return <li>hogehoge</li>
      })}
    </ul>
  )
}

reactが吐いてくれるエラー
unique keyを指定してよ！っていうよくあるやつですね

warning.js:34 Warning: Each child in an array or iterator should have a unique "key" prop. See https://fb.me/react-warning-keys for more information.

keyを指定するとエラーが起きない

もちろんkeyを指定するとエラーが起きません。

render(){
  const {list} = this.state;
  return(
    <ul>
      {list.map((item, i) => {
        return <li key={i}>hogehoge</li> //keyを指定
      })}
    </ul>
  )
}

mapする要素を外に切り出したときのkey

例えば、mapする要素が大きくなって外に切り出したくなったとする
この場合、keyを付けないともちろん先ほどのunique keyつけてよ！っていうエラーが起きる。

この場合、keyは子コンポーネントの中の要素には付けなくてよく、コンポーネントにkeyを渡すだけでよい。

render(){
  const {list} = this.state;
  return(
    <ul>
      {list.map((item, i) => {
        return <List item={item} key={i} /> //keyを渡す
      })}
    </ul>
  )
}
...
const List = ({item}) => {
  return(
    <li>{hoge}</li> // 子コンポーネントには必要なし！
  )
}

地味にハマったのでメモっておきました。