【React】propsとmap関数の組み合わせでリストレンダリング

未だに使い慣れていないJavaScript版foreachのmap関数。
たまたまpropsと組み合わせて使用する機会があったため、記録として残します。

import React from 'react';

const App = () => {
  // ①リストレンダリングするためのオブジェクトを用意
  const details = [
    {name: "Meow", age: 10},
    {name: "Hanada", age: 20}
  ]
  return (
    <div>
      {
　　// ③map関数でdetailsオブジェクトの展開
        details.map((detail) => {
          return <Cat name={detail.name} age={detail.age}/>
        })
      }
    </div>
  )
}

// ②propsを受け取るクラスコンポーネントを設定
const Cat = (props) => {
  return <div>My name is {props.name}.My age is {props.age}</div>
}

export default App;

コードを書くなら以下の順序が分かりやすいです。
①リストレンダリングするためのオブジェクトを用意
②propsを受け取るクラスコンポーネントを設定
③map関数でdetailsオブジェクトの展開

ただしこの状態だと
「Warning: Each child in a list should have a unique "key" prop.」
という警告が出ます。

リストレンダリングをする際にはユニークキーをリストの各要素に追加することがベストプラクティスです。

なぜならReactでは一部の要素が変わった際に、ユニークキーを参照してその部分だけを再レンダリングしてくれるようになっているためです。

以下のように修正しましょう。

import React from 'react';

const App = () => {
  const details = [
    {name: "Meow", age: 10},
    {name: "Hanada", age: 20}
  ]
  return (
    <div>
      {
        details.map((detail, index) => { // indexの追加
          return <Cat name={detail.name} age={detail.age} key={index}/>　// keyの追加
        })
      }
    </div>
  )
}

const Cat = (props) => {
  return <div>My name is {props.name}.My age is {props.age}</div>
}

export default App;