ReactでES6のmapメソッドを使用してリストを作成する

ECMA Script6

2018.03.292022.08.22

ReactでES6のmapメソッドを使用してリストを作成する
1. 関連

ReactでES6のmapメソッドを使用してリストを作成する

HTMLリストをレンダリングするReactコンポーネントを作成してみます。

class Test extends React.Component {
  render() {
    const items = ['リンゴ', 'バナナ', 'アップル'];
    return (
    <ul>
   {
      items.map(e => {
        return <li>{e}</li>
      })
    }
    </ul>
    )
  }
}

<li>～</li>タグの個所を配列のmapメソッドとアロー関数を使用してレンダリングします。

サンプル

リスト内容はpropsから渡すコンポーネントに修正する

TestというリストをレンダリングするReactコンポーネントを作成しましたが、肝心のリスト内容が固定になってしまっています。これだと汎用性がないので、propsを使用して属性として外部から渡してあげます。

以下のように書きなおします。

<div id="koko"></div>
<script type="text/babel">
  class Test extends React.Component {
    render() {
      // const items = ['リンゴ', 'バナナ', 'アップル'];
      const items = this.props.items.split(",");
      return (
        <ul>
        {
          items.map(e => {
            return <li>{e}</li>
          })
        }
        </ul>
      )
    }
  }
  ReactDOM.render(
    <Test items="リンゴ,バナナ,アップル" />,
    document.getElementById("koko")
  )
</script>

この方がTestコンポーネントのitems属性に指定する値を変えることによってレンダリングされるリストの内容が変わるので良いかと思います。

サンプル