React で show more できるリストを作る

何か正式な名称があるのかよくわかりませんが、QiitaやGitHubのホームページにも実装されている、

こういうボタンをReactで実現する方法です。

全く装飾していないので見た目はアレですが、こんな感じの動きになります。

ソースコード

import React, { Component } from 'react';

const items = [
  'a',
  'b',
  'c',
  'd',
  'e',
  'f',
  'g',
  'h',
  'i',
  'j',
  'k',
  'l',
  'm',
  'n',
]

export default class App extends Component {
  constructor() {
    super()

    this.state = {
      marker: 5,
    }

    this.loadList = this.loadList.bind(this)
  }

  render() {
    const list = items.map(item => <li>{item}</li>)

    return (
      <div className="App">
        <ul>
          {
            list.slice(0, this.state.marker)
          }
        </ul>
        {
          items.length > this.state.marker
            ? <button onClick={this.loadList}>MORE</button>
            : ''
        }
      </div>
    );
  }

  loadList() {
    this.setState({
      marker: this.state.marker + 5
    })
  }
}

markerというstateで、リストの何個目までを表示させるかを管理しています。
render関数内で、sliceで配列を切ってmarker個目までの要素を表示させています。

その下の三項演算子では、リスト要素数とmarkerを比較して、markerのほうが小さい(まだ表示されていない要素がある)場合、MOREボタンを表示しています。
ボタンのonClickに紐づけられたloadList関数でmarkerを更新します。
stateの更新によって自動的にrender関数が呼ばれ、表示も更新されるという仕組みです。

React標準の仕組みを使って、わりと簡単に実装できました。

私の個人ページ内でも使用しています。
こちらは見た目もちゃんと整えているので、よろしければソースコードを参考にしてみてください。