[React]map()を使ってみる。

はじめに

Reactでmap()を使ってみました。
今回は、連想配列の内容を描画したいと思います。

連想配列の要素とmap()による描画

• 連想配列の要素

this.state = {
  associativeArray: [
    { number: 0, content: 'Hello' },
    { number: 1, content: 'Bye' }
  ],
}

今回は、コンポーネントのstateに連想配列[associativeArray]を定義しました。
要素は以下の通りです。

number	content
0	'Hello'
1	'Bye'

• map()による描画

実際にmap()を使って、連想配列[associateveArray]の要素を描画します。
今回は、テーブルを使います。

<table>
  {this.state.associativeArray.map((array) =>
    <tr key={array.number}>
      <td>{array.number}</td>
      <td>{array.content}</td>
    </tr>
  )}
</table>

map()の中でタグ[tr]と[td]を使って描画をしています。
1つだけ注意点があります。
それは key の存在です。
map()を使って要素を描画する場合
各要素のkeyを一意になるように指定しなければなりません。

■ソースコード

▶ソースコードを表示する。

/* React */
import React, { Component } from 'react'
import ReactDOM from 'react-dom'

class ReactMap extends Component {
  constructor(props) {
    super(props)
    this.state = {
      associativeArray: [
        { number: 0, content: 'Hello' },
        { number: 1, content: 'Bye' }
      ],
    }
  }

  render() {
    return (
      <table>
        {this.state.associativeArray.map((array) =>
            <tr key={array.number}>
              <td>{array.number}</td>
              <td>{array.content}</td>
            </tr>
        )}
      </table>
    )
  }
}

ReactDOM.render(
  <ReactMap />,
  document.getElementById('app')
)

Githubにソースコードがあります。
GitHub - thomasJs8/react_samples: Sample codes are here.
∟02-react-map.js

まとめ

javascriptのmap()と特に使い方は変わらないので(当たり前ですが)
簡単でした。(keyだけ注意です。)